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

【问题标题】：How can I get continuous top and bottom borders in an html table如何在 html 表格中获得连续的顶部和底部边框
【发布时间】：2013-06-18 17:53:54
【问题描述】：

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

我的问题是：

如何在表格中的某些行之间获得实心水平线
另外，作为一个小查询，是否有更好的方法在左侧列中的行标签和数据之间留出一点空间。目前我正在指定一个空白列。

该图片背后的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>

【问题讨论】：

Table row borders in HTML5 without gaps的可能重复
这样的？：jsfiddle.net/kmHmK

标签： html css html-table

【解决方案1】：

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

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

JSFiddle Demo

【讨论】：

cellpadding 和 cellspacing 是不推荐使用的属性。
谢谢，这很有帮助:-)。但是td { padding:10px; } 似乎在左、右、上和下添加了填充。我怎样才能在左边和右边添加填充？
只对左右填充，做padding:0 10px，这意味着top和bottom 0和left和right得到10px的填充。

【解决方案2】：

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

.mytable {
 border-collapse: collapse;
}

.mytable td {
 padding: .2em;
}

collapse 使单元格之间的空间消失，因此形成一个连续的边界，就像您要求的那样。但是，所有文本都非常靠近，因此在单元格上添加一点填充会使它看起来更好。

【讨论】：

谢谢，这很有帮助:-)。但是td { padding: .2em; } 似乎在左、右、上和下添加了填充。我怎样才能在左边和右边添加填充？
像这样：td { padding: 0 .2em; } 表示：0 代表上下，0.2em 代表左右。
感谢 vm 为您提供帮助 :-)。我给你投了赞成票，但另一个人先到了，所以我接受了他的回答！
@Stochastically 为此干杯，我添加了我的答案，因为尼克的初始答案不同（与单元格间距和单元格填充有关），我相信我的答案会更好。后来我想他改变了答案。无论如何，您应该接受您在项目中实际实施的答案，因为 Stackoverflow 上的接受代表了现实世界的最佳实践。