Нет интервала между границами перед первым элементом и после последнего элемента

У меня есть поддельная таблица. Я использую свойство 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/

Ответы

Ответ 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%, а margin right не будет работать.

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

Ответ 2

Если вы посмотрите на spec для таблиц в CSS, вы найдете там, что border-spacing применяется равномерно, добавив, например. маржа к вашим элементам table-cell игнорируется.

Таким образом, кажется, нет четкого решения вашей проблемы, используя div с display: table, за исключением довольно грязных хаков (я нашел это one используя "разделительные divs" ).

Но если вам будет удобно использовать "настоящую" таблицу, то вы можете использовать решение, которое я считаю вполне приемлемым. Просмотрите jsFiddle обновление оригинала.

Разметка (я добавил столбец):

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

Идея состоит в том, чтобы сделать внутренний td diplay:inline-block, что заставляет их реагировать на поля снова. Затем вы применяете правило селектора CSS td + td, которое выбирает все 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;
}