向 HTML 表格结构添加分隔线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9936452/
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
Adding a divider to a HTML table structure
提问by tonyf
I have the following setup in MS IE8:
我在 MS IE8 中有以下设置：
<table class="my-info">
<tbody>
<tr>
<td class="info-left">First name:</td>
<td class="info-highlight">FirstName</td>
</tr>
<tr>
<td class="info-left">Surname:</td>
<td class="info-highlight">Surname</td>
</tr>
<tr>
<td class="info-left">Email:</td>
<td class="info-highlight">TheEmail</td>
</tr>
</tbody>
</table>
What I am after is a means of placing like a beveled line/dashed line or just a line between the Surname and Email.
我所追求的是一种像斜线/虚线或只是姓氏和电子邮件之间的线的放置方法。
I have tried <hr />inside a but the spacing top and bottom is too much. I want it too look neat and compact.
我<hr />在 a 里面试过，但是上下间距太大了。我也希望它看起来整洁紧凑。
回答by iambriansreed
Maybe:
也许：
<tr>
<td class="info-left">Surname:</td>
<td class="info-highlight">Surname</td>
</tr>
<tr>
<td colspan="2" class="divider"><hr /></td>
</tr>
<tr>
<td class="info-left">Email:</td>
<td class="info-highlight">TheEmail</td>
</tr>
回答by jeremysawesome
I'd probably do something like this. Of course, I'm a big fan of border-collapse.
我可能会做这样的事情。当然，我是边界折叠的忠实粉丝。
/CSS/
/ CSS/
.my-info {border-collapse: collapse;}
.bottom-border { border-bottom: 1px dashed black; }
/HTML/
/ HTML/
<table class="my-info">
<tbody>
<tr>
<td class="info-left">First name:</td>
<td class="info-highlight">FirstName</td>
</tr>
<tr>
<td class="info-left bottom-border">Surname:</td>
<td class="info-highlight bottom-border">Surname</td>
</tr>
<tr>
<td class="info-left">Email:</td>
<td class="info-highlight">TheEmail</td>
</tr>
</tbody>
</table>
/JSFiddle/ http://jsfiddle.net/wHmyx/
/ JSFiddle/ http://jsfiddle.net/wHmyx/
回答by Rohit Azad
Hi you can do this easily by css nth-child selector see the css and html below:-
嗨，您可以通过 css nth-child 选择器轻松完成此操作，请参阅下面的 css 和 html：-
css
css
.my-info td{
padding:2px;
}
.my-info tr:nth-child(2) {
border-bottom:solid 1px black;
}
HMTL
HMTL
<table class="my-info">
<tbody>
<tr>
<td class="info-left">First name:</td>
<td class="info-highlight">FirstName</td>
</tr>
<tr>
<td class="info-left">Surname:</td>
<td class="info-highlight">Surname</td>
</tr>
<tr>
<td class="info-left">Email:</td>
<td class="info-highlight">TheEmail</td>
</tr>
</tbody>
see the demo:- http://jsfiddle.net/TfK6Z/1/
