如何从HTML表格的最后一行删除底部边框?

问题描述:

我该如何去掉HTML表格最后一行的底部边框?如何从HTML表格的最后一行删除底部边框?

这里是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; 
} 

这里是一个快速小提琴:http://jsfiddle.net/tZ9cA/

您可以选择最最后表行tbody元素的,然后问题的所有<td>儿童如下:

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

WORKING DEMO

试试这个:

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

最后孩子选择将选择最后一排,然后你可以从那里针对所有单元格。