我正在编写一个程序，该程序将生成一个用于显示某些数据的 html 文件。我需要对齐所有列，所以我尝试使用单个 html 表，但我希望在某些行之间有水平实线来分隔数据。使用 border-top 和 border-bottom 我已经能够达到我想要的大部分方式，但是这产生的水平线不是实线(见图片)。
我的问题是:
- 如何在我的表中的某些行之间获得实心水平线
- 另外，一个小问题，有没有更好的方法在左侧列的行标签和数据之间留出一点空间。目前我正在指定一个空白列。
<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>
最佳答案
在 CSS 中添加删除默认的 border-spacing 并向单元格添加 padding
table { border-spacing:0 }
td { padding:10px; }
关于html - 如何在 html 表格中获得连续的顶部和底部边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17237966/