文章/答案/技术大牛

发布

社区首页 >问答首页 >对表使用<hr>标记？

问对表使用<hr>标记？
EN

Stack Overflow用户

提问于 2011-12-15 23:18:52

回答 10查看 92.7K关注 0票数 22

我有一个在CSS中将边框设置为"none“的表格。但是，我想在表格上放置一条水平线来分隔每一行。我曾尝试将<hr>标记放在特定行的每个<td> </td>标记之间，但它会打印一条水平的黑线，并在每列之间留出小空格。

有没有办法用不同的方法打印表中的水平线？

html

回答 10

Stack Overflow用户

回答已采纳

发布于 2011-12-15 23:21:55

我建议你这样写：

<tr style="border-bottom: 1px solid #000;">

在你想要的每一行上。您也可以为每个单元格单独执行此操作。

更新

如果可以，我建议使用css类，并使用单独的样式表。例如

<tr class="bordered"></tr>

tr.bordered {
    border-bottom: 1px solid #000;
}

票数 27

Stack Overflow用户

发布于 2011-12-15 23:29:29

在行之间添加水平线的最佳方法是使用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>

有关更多边框选项，请查看this w3Schools page。

票数 18

Stack Overflow用户

发布于 2011-12-15 23:26:53

你可以为你的“分离的”<tr>定义一个CSS类

<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/

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8522337

复制

相似问题

问对表使用<hr>标记？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对表使用<hr>标记？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对表使用<hr>标记？
EN