如何显示TableRow的边框,而不是TableCells'

时间:2016-03-31 12:43:25

标签: html css border css-tables

我正在处理动态生成的表atm。 CSS-File看起来像这样:

...
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;
}
...

我不想看到细胞的边界,但是细胞需要在那里,因为它们是占位符,因此我将它们的颜色更改为白色。 我的问题是,我不知道为什么行的边界不会显示出来。或者,让我们说,是否可以显示行的边界,但不能显示单元格?'

3 个答案:

答案 0 :(得分:2)

由于不同浏览器的行为方式不同,在表格边框方面,我发现它总是更加一致,将边框放在单元格的顶部/底部而不是行:

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

由于这将绘制每个单元格的顶部边框,因此该行看起来像一个边框(-bottom)。

要在最上面添加另一个边框:

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

最后,如果您还需要左右边框,请将它们添加到每行的第一个/最后一个单元格中:

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

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

答案 1 :(得分:0)

请试试这个:

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

答案 2 :(得分:0)

tr{
   outline : 1px solid black;
}