如何在html表中获得连续的顶部和底部边框

Question

我正在编写一个程序，它将生成一个用于显示某些数据的html文件。 我需要对齐所有列，所以我试图使用单个html表，但我希望在某些行之间使用实线水平线来分隔数据。 使用border-top和border-bottom我已经能够达到我想要的大部分路径，但是它产生的水平线不是实心的（见图）。

铬broswer的图像

我的问题是：

如何在表格中的某些行之间获得稳固的水平线条
此外，一个次要查询，是否有更好的方法来获得左侧列中的行标签和数据之间的一些空间。 目前我正在指定一个空白列。

该图像背后的HTML如下：

 <html> <head> <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=Windows-1252"> <style type="text/css"> tr.border_top td { border-top:1pt solid black; } tr.border_bottom td { border-bottom:1pt solid black; } </style> </head> <body bgcolor=white><b>DATA</b></p> <table> <col align="left"></col> <col width=20></col> <col align="right"></col> <col align="right"></col> <col align="right"></col> <col align="right"></col> <tr class="border_top"> <td><b>XYZ1</b></td> <td></td> <td>2.120</td> <td><span style="color:blue">2.280</span></td> <td><span style="color:blue">2.810</span></td> <td>3.000</td> </tr> <tr class="border_bottom"> <td><b>ABC1</b></td> <td></td> <td>1.370</td> <td><span style="color:blue">1.550</span></td> <td>1.690</td> <td><span style="color:blue">1.780</span></td> </tr> <tr> <td><b>XYZ2</b></td> <td></td> <td><span style="color:blue">1.900</span></td> <td>1.940</td> <td>2.050</td> <td><span style="color:blue">2.100</span></td> </tr> <tr class="border_bottom"> <td><b>ABC2</b></td> <td></td> <td><span style="color:blue">1.910</span></td> <td>1.950</td> <td>2.060</td> <td><span style="color:blue">2.100</span></td> </tr> </table> </body> </html>

Answer 1

在CSS中添加删除默认border-spacing并向单元格添加padding

table { border-spacing:0 }
td { padding:10px; }

JSFiddle演示

Answer 2

给你的表一个类，例如mytable 。 然后在你的CSS中：

.mytable {
 border-collapse: collapse;
}

.mytable td {
 padding: .2em;
}

collapse使得细胞之间的空间消失，因此形成一个连续的边界，就像你要求的那样。 然而，然后所有的文本都非常接近，所以细胞上的一点填充使它看起来更好。

如何在html表中获得连续的顶部和底部边框

问题描述

2 个解决方案

解决方案1
12 已采纳 2013-06-21 14:41:15

解决方案2
2 2013-06-21 14:52:04

如何在html表中获得连续的顶部和底部边框

问题描述

2 个解决方案

解决方案1 12 已采纳 2013-06-21 14:41:15

解决方案2 2 2013-06-21 14:52:04

解决方案1
12 已采纳 2013-06-21 14:41:15

解决方案2
2 2013-06-21 14:52:04