60

我有一个包含表格行的基本 HTML 表格。我的目标是用可见线分隔这些表格行（以提高内容的可读性）。

我怎么能这样做？

4

8 回答 8

80

有几种方法可以做到这一点。单独使用 HTML，您可以编写

<table border=1 frame=void rules=rows>

或者，如果您也想要第一行上方和最后一行下方的边​​框，

<table border=1 frame=hsides rules=rows>

但是，这相当不灵活。例如，您不能使线条以这种方式点缀，或者比一个像素厚。这就是为什么过去人们使用特殊的分隔行，只包含一些旨在生成行的内容（它会有点脏，特别是当您需要制作行时，例如只有几个像素高，但这是可能的）。

在大多数情况下，现在人们使用 CSSborder属性来达到目的。它相当简单且跨浏览器。但请注意，要使线条连续，您需要使用标签中的cellspacing=0属性或 CSS 规则来防止单元格之间的间距。删除这样的间距可能需要在单元格内添加一些填充（最好使用 CSS）。tabletable { border-collapse: collapse; }

最简单的，你可以使用

<style>
table {
  border-collapse: collapse;
}
tr { 
  border: solid;
  border-width: 1px 0;
}
</style>

这也会在第一行上方和最后一行下方放置一个边框。为了防止这种情况，例如在样式表中添加以下内容：

tr:first-child {
  border-top: none;
}
tr:last-child {
  border-bottom: none;
}
于 2012-11-29T11:36:29.623 回答
18

只需设置行的边框样式：

​table tr {
    border-bottom: 1px solid black;
}​

table tr:last-child { 
    border-bottom: none; 
}

这是一个小提琴。

如@pkyeck 所述编辑。第二种样式避免了最后一行下方的行。也许你正在寻找这个。

于 2012-11-29T11:03:49.227 回答
11

您可以使用border-bottomcss 属性。

table {
  border-collapse: collapse;
}

table tr {
  border-bottom: 1px solid black;
}

table tr:last-child {
  border: 0;
}
<table>
  <tr>
    <td>1</td>
    <td>Foo</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Bar</td>
  </tr>
</table>

于 2012-11-29T11:03:23.110 回答
7

你必须使用 CSS。

在我看来，当您经常有一张桌子时，最好在每条线的每一侧单独放置一条线。

试试这个代码：

HTML：

<table>
    <tr class="row"><td>row 1</td></tr>
    <tr class="row"><td>row 2</td></tr>
</table>

CSS：

.row {
    border:1px solid black; 
}

再见

安德烈亚

于 2012-11-29T11:11:58.533 回答
3

HTML

<table cellspacing="0">
  <tr class="top bottom row">
    <td>one one</td>
    <td>one two</td>
  </tr>
  <tr class="top bottom row">
    <td>two one</td>
    <td>two two</td>
  </tr>
  <tr class="top bottom row">
    <td>three one</td>
    <td>three two</td>
  </tr>

</table>​

CSS：

tr.top td { border-top: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
tr.row td:first-child { border-left: thin solid black; }
tr.row td:last-child { border-right: thin solid black; }​

演示

于 2012-11-29T11:08:38.550 回答
2

如果您不想使用 CSS，请在您的行之间尝试这个：

    <tr>
    <td class="divider"><hr /></td>
    </tr>

干杯！！

于 2019-06-07T09:27:54.693 回答
1

使用 css 为行元素设置样式：

border-bottom: 1px solid black;
于 2012-11-29T11:02:12.363 回答
0

将 colspan 设置为您的列数，并根据需要设置背景颜色

<tr style="background: #aaa;">
 <td colspan="2"></td>
</tr>
于 2020-05-29T07:38:13.927 回答