如何给Table每一行tr设置border？

OS Devp Consultant

于 2024-08-09 16:14:30 发布

阅读量322

点赞数 10

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_33739887/article/details/141064864

版权

要为Table的每一行添加下边框而不影响其他边框，你可以使用以下两种方法之一：

方法1：使用 `border-collapse: collapse`

这种方法通过将 table、th 和 td 的边框合并成单一的边框，允许在 tr 上设置边框。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid red;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

</body>
</html>

方法2：使用 `cellspacing="0"` 和在 `td` 上设置边框

这种方法通过将表格的 cellspacing 设置为 0 来去除单元格之间的间隙，并在 td 上设置下边框。

<!DOCTYPE html>
<html>
<head>
<style>
td {
  border-bottom: 1px solid red;
}
</style>
</head>
<body>

<table cellspacing="0">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

</body>
</html>

两种方法的区别在于第一种方法通过设置 border-collapse: collapse 使得 tr 的边框起作用，而第二种方法通过设置 cellspacing="0" 使得单元格之间没有间隙，并在 td 上设置下边框。你可以根据具体需求选择合适的方法。

OS Devp Consultant

关注

10
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何给Table每一行tr设置border？

你可以根据具体需求选择合适的方法。两种方法的区别在于第一种方法通过设置。的边框起作用，而第二种方法通过设置。的边框合并成单一的边框，允许在。来去除单元格之间的间隙，并在。使得单元格之间没有间隙，并在。这种方法通过将表格的。
复制链接

扫一扫