如何:"用行分隔表行"

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

这是一个小提琴.

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

Answer 3

你可以使用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>

Answer 4

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

再见

安德烈亚