8

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

图片来自 chrome 浏览器

我的问题是：

  1. 如何在表格中的某些行之间获得实心水平线
  2. 此外，一个小查询，是否有更好的方法在左侧列中的行标签和数据之间获得一点空间。目前我正在指定一个空白列。
该图像背后的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>
4

2 回答 2

14

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

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

JSFiddle 演示

于 2013-06-21T14:41:15.357 回答
2

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

.mytable {
 border-collapse: collapse;
}

.mytable td {
 padding: .2em;
}

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

于 2013-06-21T14:52:04.237 回答