Wie entferne ich den unteren Rand von der letzten Zeile in meiner HTML-Tabelle?

Question

Wie gehe ich vor, um den unteren Rand aus der allerletzten Zeile in meiner HTML-Tabelle zu entfernen? Hier

ist die CSS:

#data { 
    width: 100%; 
    table-layout: fixed; 
    border-collapse: collapse; 
    border: 1px solid red; 
} 
#data th { 
    text-decoration: underline; 
    border: 1px solid blue; 
} 
#data td { 
    border: 1px solid blue; 
} 
#data th, #data td { 
    padding: 5px; 
    text-align: left; 
    width: 150px; 
} 
#data thead { 
    background-color: #333333; 
    color: #fdfdfd; 
} 
#data thead tr { 
    display: block; 
    position: relative; 
} 
#data tbody { 
    display: block; 
    overflow: auto; 
    width: 100%; 
    height: 300px; 
} 
#data tbody tr:nth-child(even) { 
    background-color: #dddddd; 
} 

Hier ist eine kurze Geige: http://jsfiddle.net/tZ9cA/

Answer 1

Sie konnten die letzten Tabellenzeile Kind wählen von tbody Element und dann Subjekt all seinen <td> Kinder folgt:

#data tbody > tr:last-child > td { 
    border-bottom: 0; 
} 

WORKING DEMO

Answer 2

Versuchen Sie folgendes:

#data tr:last-child td{ 
    border-bottom:0; 
} 

Das letzte Kind-Selektor die letzte Zeile auswählen und dann können Sie alle Zellen von dort zielen.