首页 > web前端 > css教程 > 如何为 HTML 表格中的每一行添加底部边框?

如何为 HTML 表格中的每一行添加底部边框?

DDD
发布: 2024-12-14 00:29:11
原创
868 人浏览过

How Can I Add a Bottom Border to Each Row in an HTML Table?

向表格行底部添加边框

尝试向每个表格行底部添加纯黑色边框时遇到问题()。使用内联样式或 CSS 最初被证明是无效的。

要纠正这个问题,请合并 border-collapse:collapse;在 CSS 的表格规则中:

table {
    border-collapse: collapse;
}
登录后复制

此修改实质上合并了相邻边框,确保应用于各个行的边框可见。

代码示例:

<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>
登录后复制
table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1pt solid black;
}
登录后复制

应用此 CSS 后,表格中行之间的边框变得可见,如下所示预计。

以上是如何为 HTML 表格中的每一行添加底部边框?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板