Как получить отступ между ячейками таблицы, но не вокруг всей таблицы?

Question

Я хочу иметь таблицу с отступом между каждой ячейкой, но не вокруг внешних краевых ячеек, то есть не вокруг самой таблицы.

Использование:

border-collapse : separate;
border-spacing  : 0.5em;

везде дает мне отступы, а использование:

border-collapse : collapse;

нигде не дает заполнения.

Попытка альтернативного подхода позволяет получить отступтолько между ячейками по горизонтали с помощью селектора td + td.Однако я не могу использовать селектор tr + tr, потому что кажется, что tr игнорирует поля, отступы и правила границ.

И, конечно, заполнение простого селектора td применяется ко всем ячейкам, дажевнешние края внешних ячеек.

Это должно работать только для браузера текущего поколения - нет IE 6 или 7 для меня большое спасибо.И я не собираюсь терять сон из-за IE 8, хотя было бы неплохо, если бы это сработало.

Answer 1

Это не идеальное решение, так как оно использует отступы, а не интервал между границами. Возможно, это будет работать для вашей проблемы, хотя.

HTML:

<table>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

И CSS:

table {
    border: 1px red solid;
    border-collapse: separate;
}

td {
    background-color: green;
    border: 1px black solid;
    padding: 10px;
}

td:first-child {
    padding-left: 0px;
}

td:last-child {
    padding-right: 0px;
}

tr:first-child td {
    padding-top: 0px;
}

tr:last-child td {
    padding-bottom: 0px;
}

Производит:

Также на jsFiddle .

Answer 2

Можете ли вы поиграть с разметкой, чтобы добавить .first к первой ячейке строки и .last к последней, а также, я думаю, также к первой и последней строкам, а затем дополнить соответствующим образом?