虚线分隔表中的行

Question

我试图在每个表格行之后添加一个虚线分隔符。我希望它位于两个中间单元格下方，如下例所示。

<table>
    <tr>
        <td></td>
        <td style="border-bottom: 1px dotted #000;">foo</td>
        <td style="border-bottom: 1px dotted #000;">bar</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td style="border-bottom: 1px dotted #000;">foo</td>
        <td style="border-bottom: 1px dotted #000;">bar</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td style="border-bottom: 1px dotted #000;">foo</td>
        <td style="border-bottom: 1px dotted #000;">bar</td>
        <td></td>
    </tr>
</table>

正如您在图片或here中看到的那样，两个细胞系之间存在差距。有没有办法解决这个问题而不在每行之间添加一个带有colspan的行？

Answer 1

是的，可以使用以下CSS属性来完成：border-collapse: collapse;

以下是JSFiddle：http://jsfiddle.net/pwee167/5wo2yyam/2/

它应该如下图所示：

Answer 2

<table cellspacing="0">

应使两条虚线连续。然而，浏览器绘制点的方式使得最后一个点看起来比其余点略大。这是因为第一个虚线列的最后一个点紧邻第二个虚线列的第一个点。简单来说，虚线不会结束，也不会以点之间的空间开始，而是以点为单位。

Answer 3

<table style="border-collapse:collapse;padding:0;margin:0;">

这可能是你可以到达这里的最好的......那里仍然有一点视觉上的不连续性，因为看起来边界是从每个单元格开始绘制的（所以这些如何连接取决于虚线在前一个单元格上的结束位置。 您也可以尝试使用<tr style="border-bottom: 1px dotted #000;">（并在<td>上留下样式）...虽然看起来效果相同。