Question

我有一张假桌子。我使用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/

Answer 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>

Answer 2

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

所以使用div和display: table使用<table> <tr> <td></td> <td></td> <td class="last"></td> </tr> </table>似乎没有干净的解决方案除了相当脏的黑客（我发现这个one使用“spacer divs”）。

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

标记（我添加了一列）：

td

这个想法是让内部diplay:inline-block s td + td让他们再次对边距做出反应。然后应用CSS选择器规则td，它选择所有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; }应用于这些元素以获得“内部间距”。最后，您必须{{1}}最后一列才能使其与正确的表格边框相加。

{{1}}

Answer 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;
}

第一个项目之前和最后一个项目之后没有边框间距

3 个答案: