Html 如何：“用一行分隔表格行”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13624276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to: "Separate table rows with a line"
提问by Milo?
I have a basic HTML table which contains table rows. My goal is to separate those table rows with a visible line (for better readability of the content).
我有一个包含表格行的基本 HTML 表格。我的目标是用可见线分隔这些表行（为了更好的内容可读性）。
How could I do this?
我怎么能这样做？
回答by Jukka K. Korpela
There are several ways to do that. Using HTML alone, you can write
有几种方法可以做到这一点。单独使用HTML，你可以写
<table border=1 frame=void rules=rows>
or, if you want a border above the first row and below the last row too,
或者，如果您也想要第一行上方和最后一行下方的边框，
<table border=1 frame=hsides rules=rows>
This is rather inflexible, though; you cannot e.g. make the lines dotted this way, or thicker than one pixel. This is why in the past people used special separator rows, consisting of nothing but some content intended to produce a line (it gets somewhat dirty, especially when you need to make rows e.g. just a few pixels high, but it's possible).
不过，这相当不灵活。例如，您不能使线条以这种方式点开，或者比一个像素更粗。这就是过去人们使用特殊分隔行的原因，这些行仅由一些旨在生成一行的内容组成（它会变得有些脏，尤其是当您需要将行设置为仅几个像素高时，但这是可能的）。
For the most of it, people nowadays use CSS borderproperties for the purpose. It's fairly simple and cross-browser. But note that to make the lines continuous, you need to prevent spacing between cells, using either the cellspacing=0attribute in the tabletag or the CSS rule table { border-collapse: collapse; }. Removing such spacing may necessitate adding some padding (with CSS, preferably) insidethe cells.
大多数情况下，人们现在使用 CSSborder属性来达到这个目的。它相当简单且跨浏览器。但请注意，要使线条连续，您需要使用标签中的cellspacing=0属性table或 CSS 规则来防止单元格之间的间距table { border-collapse: collapse; }。删除这样的间距可能需要在单元格内添加一些填充（最好使用 CSS）。
At the simplest, you could use
最简单的，你可以使用
<style>
table {
border-collapse: collapse;
}
tr {
border: solid;
border-width: 1px 0;
}
</style>
This puts a border above the first row and below the last row too. To prevent that, add e.g. the following into the style sheet:
这会在第一行上方和最后一行下方放置一个边框。为了防止这种情况，将例如以下内容添加到样式表中：
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
回答by cem
Just style the border of the rows:
只需设置行的边框样式：
?table tr {
border-bottom: 1px solid black;
}?
table tr:last-child {
border-bottom: none;
}
Here is a fiddle.
这是一个小提琴。
Edited as mentioned by @pkyeck. The second style avoids the line under the last row. Maybe you are looking for this.
如@pkyeck 所述编辑。第二种样式避免了最后一行下的线。也许你正在寻找这个。
回答by Bruno
You could use the border-bottomcss property.
您可以使用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>回答by chridam
HTML
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:
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; }?
回答by AndreaNobili
You have to use CSS.
你必须使用 CSS。
In my opinion when you have a table often it is good with a separate line each side of the line.
在我看来，当你有一张桌子时，每条线的每一边都有一条单独的线是好的。
Try this code:
试试这个代码：
HTML:
HTML：
<table>
<tr class="row"><td>row 1</td></tr>
<tr class="row"><td>row 2</td></tr>
</table>
CSS:
CSS：
.row {
border:1px solid black;
}
Bye
再见
Andrea
安德烈亚
回答by looper
Style the row-element with css:
使用 css 设置行元素样式：
border-bottom: 1px solid black;
回答by EL.ALEX78UK
If you don't want to use CSS try this one between your rows:
如果您不想使用 CSS，请在您的行之间尝试这个：
<tr>
<td class="divider"><hr /></td>
</tr>
Cheers!!
干杯！！
回答by Dgloria
Set colspan to your number of columns, and background color as you wish
根据需要将 colspan 设置为您的列数和背景颜色
<tr style="background: #aaa;">
<td colspan="2"></td>
</tr>
