第一项之前和最后一项之后没有边框间距答案

【问题标题】：No border-spacing before first item and after last item第一项之前和最后一项之后没有边框间距
【发布时间】：2011-08-26 15:22:38
【问题描述】：

我有一张假桌子。我使用border-spacing 属性在它们之间创建一个空间。但这也会在第一个单元格之前和最后一个单元格之后创建间距。

我希望它只在这两列之间创建一个空间。

HTML：

<div class="table">
    <div class="cell"></div>
    <div class="cell"></div>
</div>

CSS：

.table {
    display: table;
    width: 100%;
    border-spacing: 11px 0;
    border: 1px solid #222;
}

.cell {
    display: table-cell;
    width: 50%;
    height: 20px;
    border: 1px solid #999;
    background: #ccc;
}

JSFiddle：http://jsfiddle.net/ACH2Q/

【问题讨论】：

我决定只制作第三个宽度为 11px 的单元格。

标签： css css-tables

【解决方案1】：

您可以使用border-spacing 属性为所有表格单元格添加间距。然后使用 margin-left 和 margin right 从父级移除外边框间距。

.container {
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;
}

.grid {
    margin-left: -20px; /* remove outer border spacing */
    margin-right: -20px; /* remove outer border spacing */
}

.row {
    display: table;
    table-layout: fixed; /* keep equal cell widths */
    width: 100%; /* need width otherwise cells aren't equal and they self collapse */
    border-spacing: 20px 0; /* best way to space cells but has outer padding */
}

.col {
    display: table-cell;
    vertical-align: top;
}

唯一的缺点是您需要额外的嵌套 div，因为表格需要 100% 的宽度，而右边距不起作用。

<div class="container">
    <div class="grid">
        <div class="row">
            <div class="col">col</div>
            <div class="col">col</div>
            <div class="col">col</div>
        </div>
    </div>
</div>

【讨论】：

或者，您可以在.row 上执行min-width:100%;margin:0 -20px;，它应该可以正常工作:)
@bfrohs，你能提供一个演示吗？在最新的 Chrome 下，margin-right 似乎不适用于 display: table，即使是 min-width。
@SebastianNowak 似乎也没有在 Firefox 中调整宽度。也许从那时起行为发生了变化，或者它从未奏效？无论如何，你可以使用calc(100% + 40px) (if supported) 来解决这个限制：jsfiddle.net/bfrohs/0h5qyu0t

【解决方案2】：

如果您查看 CSS 中表格的 spec，您会发现 border-spacing 统一适用，添加例如table-cell 元素的边距被忽略。

因此，使用divs 和display: table 似乎没有干净的解决方案，除了相当肮脏的黑客（我发现这个one 使用“spacer divs”）。

但是，如果您可以改用“真实”表格，那么您可以使用我认为完全可以接受的解决方案。请参阅此 jsFiddle 更新您的原件。

标记（我添加了一列）：

<table>
    <tr>
        <td></td>
        <td></td>
        <td class="last"></td>
    </tr>         
</table>

我们的想法是让内部tds diplay:inline-block 再次响应边距。然后应用 CSS 选择器规则 td + td，它选择除第一个之外的所有 tds。将margin-left 应用于这些元素以获得“内部间距”。最后你必须float:right最后一列才能使它与右表边框相加。

table {
    width: 100%;
    border: 5px solid #222;
    border-collapse: separate;
}

td + td {
    margin-left: 8%;
}

td.last {
    float: right;
}

td {
    display: inline-block;
    width: 27%;
    height: 20px;
    border: 1px solid #999;
    background: #ccc;
}

【讨论】：

【解决方案3】：

只需添加负数 margin-left 和 margin-right 以匹配您的水平（第一个值）border-spacing 值。就这样……

.table {
    display: table;
    width: 100%;
    border: 1px solid #222;
    border-spacing: 11px 0;
    /* values to add  */
    margin-left: -11px;
    margin-right: -11px;
}

【讨论】：