如何从我的 html 表格中的最后一行删除底部边框？答案

【问题标题】：How do I remove the bottom border from the last row in my html table?如何从我的 html 表格中的最后一行删除底部边框？
【发布时间】：2017-08-12 01:55:31
【问题描述】：

如何从 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/

【问题讨论】：

标签： html css css-selectors css-tables

【解决方案1】：

您可以选择tbody 元素的last 表格行child，然后将其所有<td> 子元素设置为如下：

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

WORKING DEMO

【讨论】：

【解决方案2】：

试试这个：

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

最后一个子选择器将选择最后一行，然后您可以从那里定位所有单元格。

【讨论】：