如何显示 TableRow 的边框，但不显示 TableCells 的边框

Question

我正在开发动态生成的 table atm。 CSS-文件如下所示：

...
td {
    border: 1px solid white;
} 

tr {
    border: 1px solid black;
    font-family: Arial;
}

table {
    width: 850px;
    border-spacing: 8px 8px;
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
...

我不想看到单元格的边框，但是单元格需要在那里，因为它们是占位符，所以我将它们的颜色更改为白色。我的问题是我不知道为什么不显示行的边框。或者说，是否可以显示行的边框，而不是单元格的边框？

Answer 1

由于不同的浏览器表现不同，在 table 边框方面，我发现将边框放在单元格的 top/bottom 而不是行上总是更一致：

td {
  border-bottom: 1px solid #000;
}

因为这将绘制每个单元格的顶部边框，所以看起来该行有一个边框（-bottom）。

要在最顶部添加另一个边框：

tr:first-child td {
  border-top: 1px solid #000;
}

最后，如果您也需要左右边框，请将它们添加到每行的 first/last 单元格中：

td:first-child {
  border-left: 1px solid #000;
}
td:last-child {
  border-right: 1px solid #000;
}

抱歉，如果这看起来很笨拙，但根据我的经验，这比尝试强制行显示正确的边框效果更好。

Answer 2

请试试这个：

tr {
    outline: thin solid black
    font-family: Arial;
}

Answer 3

tr{
   outline : 1px solid black;
}

如何显示 TableRow 的边框，但不显示 TableCells 的边框

How to show TableRow's border, but not TableCells'

html

css

border

css-tables