我有一个带有边框的表,在CSS中设置为"none".但是,我想在表格上放一条水平线来分隔每一行.我曾尝试<hr>在<td> </td>特定行的每个标记之间放置标记,但它会打印一条水平黑线,每列之间有一些小的空格.
有没有办法使用不同的方法在表格中打印水平线？
Und*_*ned 20
我建议把:
<tr style="border-bottom: 1px solid #000;">
在您希望该行开启的每一行上.您也可以为每个单元格单独执行此操作.
更新
我建议使用css类,如果可以的话,还有一个单独的样式表.例如
<tr class="bordered"></tr>
tr.bordered {
border-bottom: 1px solid #000;
}
mar*_*anx 17
在行之间添加水平线的最佳方法是使用CSS边框.首先,您想要折叠表的所有边框,以便单元格之间没有空间(这可能也有助于您的解决方案,但我不建议使用hr来实现此目的).接下来,在每个单元格的底部指定边框(td).您可以类似地将边框设置为左,右,上等.请参阅下面的自包含HTML.
<html>
<head>
<style type='text/css'>
table.test { border-collapse: collapse; }
table.test td { border-bottom: 1px solid black; }
</style>
</head>
<body>
<table class='test'>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</body>
</html>
有关更多边框选项,请查看此w3Schools页面.
您可以尝试一下，它运行得很好：
<tr>
<td colspan="Number of columns">
<hr>
</td>
</tr>
您可以为您的 'separated' 定义一个 CSS 类<tr>：
<style>
tr.separated td {
/* set border style for separated rows */
border-bottom: 1px solid black;
}
table {
/* make the border continuous (without gaps between columns) */
border-collapse: collapse;
}
</style>
然后只需标记所需的行：
<tr>
<td>
<td>
</tr>
<tr class="separated">
<td>
<td>
</tr>
<tr>
<td>
<td>
</tr>
参见示例https://jsfiddle.net/64nydcfu/1/
| 归档时间： |
|
| 查看次数： |
70792 次 |
| 最近记录： |