Управление интервалом между ячейками таблицы

Я пытаюсь создать таблицу, в которой каждая ячейка имеет цвет фона с пробелом между ними. Но у меня, похоже, возникают проблемы с этим.

Я попытался установить поля td, но, похоже, это не повлияло.

table.myclass td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
}

Если я делаю то же самое с дополнением, он работает, но тогда у меня нет интервала между ячейками.

Может ли кто-нибудь помочь мне с этим?

jsFiddle: http://jsfiddle.net/BfBSM/

Ответ 1

Используйте свойство border-spacing в элементе table для установки интервала между ячейками.

Удостоверьтесь, что border-collapse установлен на separate (или будет одна граница между каждой ячейкой, а не отдельная граница вокруг каждого из них, которые могут иметь промежуток между ними).

Ответ 2

Отметьте fiddle. Вам нужно будет взглянуть на использование пограничного краха и пограничного интервала. Для IE есть некоторые причуды (как обычно). Это основано на ответе на этот вопрос.

HTML:

<table class="test">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>

CSS

table.test td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
    padding: 12px 12px 12px 12px;
}
table.test {
    border-collapse: separate;
    border-spacing: 10px;
    *border-collapse: expression('separate', cellSpacing = '10px');
}

Ответ 3

table.test td {
    background-color: lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}

Ответ 4

Используйте границы-коллапс и интервал между границами, чтобы получить пробелы между ячейками таблицы. Я бы не рекомендовал использовать плавающие ячейки, как было предложено QQping.

JSFiddle

Ответ 5

Чтобы выполнить эту работу, используйте

<table cellspacing=12>

Если youd скорее "будет прав", чем выполнить все, вы можете использовать свойство CSS border-spacing, которое поддерживается некоторыми браузерами.