如何从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;
}
答
试试这个:
#data tr:last-child td{
border-bottom:0;
}
最后孩子选择将选择最后一排,然后你可以从那里针对所有单元格。