如何：“用行分隔表行”

Question

我有一个包含表格行的基本HTML表格。我的目标是将这些表行与可见行分开（为了更好的内容可读性）。

我怎么能这样做？

Answer 1

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

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

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

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

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

对于大多数人来说，现在人们使用CSS border属性来达到目的。这是相当简单和跨浏览器。但请注意，要使线条连续，您需要使用cellspacing=0标记中的table属性或CSS规则table { border-collapse: collapse; }来阻止单元格之间的间距。删除这样的间距可能需要在单元格中添加一些填充（使用CSS，最好是

。

最简单的方法是使用

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

Answer 2

只需设置行边框的样式：

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

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

这是fiddle。

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

Answer 3

您可以使用border-bottom css属性。

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>

Answer 4

<强> 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; }​

<强> DEMO

Answer 5

使用css设置row元素的样式：

border-bottom: 1px solid black;

Answer 6

你必须使用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; 
}

再见

安德烈

Answer 7

如果您不想使用CSS，请在行之间尝试以下方法：

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

干杯！

Answer 8

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

<tr style="background: #aaa;">
 <td colspan="2"></td>
</tr>