web-dev-qa-db-ja.com

最初のアイテムの前と最後のアイテムの後に境界線の間隔はありません

私は偽のテーブルを持っています。 border-spacingプロパティを使用して、それらの間にスペースを作成します。ただし、これにより、最初のセルの前と最後のセルの後に間隔が作成されます。

この2つの列の間にのみスペースを作成したいと思います。

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/

csscss-tables
14
Ragnis

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

唯一の欠点は、テーブルに幅100％が必要であり、右マージンが機能しないため、追加のネストされたdivが必要になることです。

<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>
22
Kim T