为什么使用 CSS 时我的表格行底部边框不显示？-css教程-PHP中文网

为什么使用 CSS 时我的表格行底部边框不显示？

Linda Hamilton

发布： 2024-12-10 19:46:09

原创

248 人浏览过

Why Doesn't My Table Row Bottom Border Appear Using CSS?

如何向表格行的底部添加边框

您有一个 3x3 的表格，并且想要向每行的底部添加边框。您尝试将 style 属性直接添加到

中元素，但这不起作用。然后你添加了这样的CSS：

tr {
border-bottom: 1pt solid black;
}

登录后复制

但这仍然不起作用。您更喜欢使用 CSS，因此不需要为每一行添加样式属性。

问题是您尚未将 border-collapse:collapse 添加到表格规则中。此属性告诉浏览器折叠相邻单元格的边框。如果没有它，边框将绘制在彼此之上，从而很难看到线条。

要解决此问题，请将 border-collapse:collapse 添加到表格规则中：

table {
border-collapse: collapse;
}

登录后复制

这里是一个例子：

table {
border-collapse: collapse;
}

tr {
border-bottom: 1pt solid black;
}

登录后复制

<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

登录后复制

这将在每行的底部添加一个 1pt 的黑色边框你的桌子。

以上是为什么使用 CSS 时我的表格行底部边框不显示？的详细内容。更多信息请关注PHP中文网其他相关文章！