Html 如何在表格中添加水平线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17169094/
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 add horizontal line in a table?
提问by PHPLover
Following is the code of table :
以下是表的代码：
<table cellpadding="0" cellspacing="" width="100%" border="0">
<tbody>
<tr class="pack_list_divider">
<td width="30%" rowspan="2">
<img id="coursimg" src="test_listings_files/default_package_image.png" alt="Section wise test" border="0">
</td>
<td width="25%">
<p class="pckgvalidity">
Validity : 1 Year
</p>
</td>
<td width="35%">
<p class="pckgvalidity">Number of Tests : 0
</p>
</td>
<td width="20%" valign="middle">
<!--<p id="test_list_loader" height="20" align="center" style="display:none;"></p> -->
<a href="http://localhost/abc/pqr/lmn/web/online-test-packages?op=get_package_detail&test_pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a" class="view_test_package_details">Test Details</a>
</td>
</tr>
<tr>
<td colspan="2" width="50%" valign="top">
<p class="descp">
sectionm wise tests
</p>
</td>
<td width="20%">
<p class="pckgrs"> <span class="rs fl" style="color:#333333; font:25px bold; margin:0px 0px 10px 10px;"> Free </span>
<span>
<a class="user-not-loggedin more addcart fl" href="http://localhost/entrance_prime/Entrance_Prime/entprm/web/my_cart.php?pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a&pack_type=test&op=aa" id="21e86b3ebf6a8af2a9fcf136c4f8e88a" value="21e86b3ebf6a8af2a9fcf136c4f8e88a" style="background:url(../images_new/add_account.png) 0 0 no-repeat;"> </a>
</span>
</p>
</td>
</tr>
</tbody>
</table>The concerned screen shot is also attached. In it I've specified where I want the horizontal line. I've tried so many tricks but none of them did the magic for me. Can anyone help me in resolving this issue? Thanks in advance.
还附上了相关的屏幕截图。在其中我指定了我想要水平线的位置。我尝试了很多技巧，但没有一个对我有用。谁能帮我解决这个问题？提前致谢。
回答by PhatHV
I use this trick:
我用这个技巧：
<table>
<tr style="border-bottom:1px solid black">
<td colspan="100%"></td>
</tr>
<tr> ... </tr>
</table>回答by Andrew
Use a Table Header and add the underline in there
使用表格标题并在其中添加下划线
table { border-collapse:collapse; }
table thead th { border-bottom: 1px solid #000; }<table>
<thead>
<tr>
<th>Valididty></th>
<th>No Of Tests</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table> With CSS you can style the header row. Make each cell have a bottom border.
使用 CSS，您可以设置标题行的样式。使每个单元格都有一个底部边框。
回答by BeNdErR
have a look here: http://jsfiddle.net/ZmBmh/
看看这里：http: //jsfiddle.net/ZmBmh/
HTML
HTML
<table>
<tr class="firstLine">
<td>hey</td><td>hello</td><td>yuhuu</td>
</tr>
<tr>
<td>hey</td><td>hello</td><td>yuhuu</td>
</tr>
<tr>
<td colspan="3"><hr/></td>
</tr>
<tr>
<td>hey</td><td>hello</td><td>yuhuu</td>
</tr>
</table>
CSS
CSS
table{
border-collapse: collapse;
}
.firstLine td{
border-bottom: 2px solid black;
}
回答by Jan-Willem de Boer
Something like this:
像这样的东西：
<table border="1" cellpadding="0" cellspacing="" width="100%">
<tbody>
<tr class="pack_list_divider">
<tr> </tr>
<td width="25%">
<p class="pckgvalidity">
Validity : 1 Year
</p>
</td>
<td width="35%">
<p class="pckgvalidity">Number of Tests : 0
</p>
</td>
<td width="20%" valign="middle">
<!--<p id="test_list_loader" height="20" align="center" style="display:none;"></p> -->
<a href="http://localhost/entrance_prime/Entrance_Prime/entprm/web/online-test-packages?op=get_package_detail&test_pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a" class="view_test_package_details">Test Details</a>
</td>
</tr>
<tr>
<td colspan="2" width="50%" valign="top">
<p class="descp">
sectionm wise tests
</p>
</td>
<td width="20%">
<p class="pckgrs"> <span class="rs fl" style="color:#333333; font:25px bold; margin:0px 0px 10px 10px;"> Free </span>
<span>
<a class="user-not-loggedin more addcart fl" href="http://localhost/entrance_prime/Entrance_Prime/entprm/web/my_cart.php?pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a&pack_type=test&op=aa" id="21e86b3ebf6a8af2a9fcf136c4f8e88a" value="21e86b3ebf6a8af2a9fcf136c4f8e88a" style="background:url(../images_new/add_account.png) 0 0 no-repeat;"> </a>
</span>
</p>
</td>
</tr>
</tbody>
</table>Tell me if that is what you're looking for.
告诉我这是否是你要找的。
