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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22511804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:17:39  来源:igfitidea点击:

How do I remove the bottom border from the last row in my html table?

htmlcsscss-selectorscss-tables

提问by user1451890

How do I go about removing the bottom border from the very last row in my HTML table?

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

Here is the CSS:

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

Here is a quick fiddle: http://jsfiddle.net/tZ9cA/

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

回答by Hashem Qolami

You could select the lasttable row childof tbodyelement and then subject all its <td>children as follows:

您可以选择元素的最后一个表格行tbody,然后<td>按如下方式处理其所有子项:

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

WORKING DEMO

工作演示

回答by Ian

Try this:

尝试这个:

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

The last-child selector will select the last row and then you can target all cells from there.

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