Установить cellpadding и cellspacing в CSS?

Question

В таблице HTML значения cellpadding и cellspacing могут быть установлены следующим образом:

<table cellspacing="1" cellpadding="1">

Как это можно сделать с помощью CSS?

Answer 1

Основы

Для управления "cellpadding" в CSS, вы можете просто использовать padding для ячеек таблицы. Например. за 10 пикселей "cellpadding":

td { 
    padding: 10px;
}

Для "cellspacing" вы можете применить свойство CSS border-spacing к вашей таблице. Например. за 10 пикселей "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

Это свойство позволяет даже разделять интервалы по горизонтали и вертикали, чего вы не могли бы сделать с помощью "cellspacing" старой школы.

Проблемы в IE <= 7 </strong>

Это будет работать практически во всех популярных браузерах, кроме Internet Explorer до Internet Explorer 7, где вам почти не повезло. Я говорю «почти», потому что эти браузеры все еще поддерживают свойство border-collapse, которое объединяет границы соседних ячеек таблицы. Если вы пытаетесь устранить пробел (то есть cellspacing="0"), тогда border-collapse:collapse должен иметь тот же эффект: между ячейками таблицы не должно быть пробела. Однако эта поддержка глючит, поскольку она не переопределяет существующий атрибут cellspacing HTML в элементе таблицы.

Вкратце: для браузеров без Internet Explorer 5-7 border-spacing обрабатывает вас. Для Internet Explorer, если ваша ситуация правильная (вам нужно 0 ячеек, а в вашей таблице это еще не определено), вы можете использовать border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

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

Answer 2

По умолчанию

Поведение браузера по умолчанию эквивалентно:

table {border-collapse: collapse;}
td    {padding: 0px;}

CELLPADDING

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

table {border-collapse: collapse;}
td    {padding: 6px;}

CELLSPACING

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

table {border-spacing: 2px;}
td    {padding: 0px;}

Оба

table {border-spacing: 2px;}
td    {padding: 6px;}

Оба (специальные)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Примечание: Если установлено border-spacing, это означает, что border-collapse свойство таблицы равно separate.

Попробуйте сами!

Здесь вы можете найти старый HTML-способ достижения этого.

Answer 3

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

Answer 4

Насколько я знаю, установка полей для ячеек таблицы не имеет никакого эффекта. Настоящий CSS-эквивалент для cellspacing - border-spacing - но он не работает в Internet Explorer.

Вы можете использовать border-collapse: collapse, чтобы надежно установить интервал между ячейками в 0, как упомянуто, но для любого другого значения я думаю, что единственный кросс-браузерный способ - это продолжать использовать атрибут cellspacing.

Answer 5

Этот хак работает для Internet Explorer 6 и новее, Google Chrome , Firefox и Opera :

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

Объявление * предназначено для Internet Explorer 6 и 7, и другие браузеры будут его игнорировать.

expression('separate', cellSpacing = '10px') возвращает 'separate', но оба оператора выполняются, так как в JavaScript вы можете передать больше аргументов, чем ожидалось, и все они будут оценены.

Answer 6

Для тех, кто хочет отличное от нуля значение пространства ячеек, у меня работает следующий CSS, но я могу протестировать его только в Firefox.

См. Ссылку Quirksmode , размещенную в другом месте , для получения подробной информации о совместимости. Кажется, он может не работать со старыми версиями Internet Explorer.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

Answer 7

Простое решение этой проблемы:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Answer 8

Кроме того, если вы хотите cellspacing="0", не забудьте добавить border-collapse: collapse в таблицу стилей table.

Answer 9

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

Так что CSS будет,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

Да, это хлопоты. Да, это работает с Internet Explorer. На самом деле, я проверял это только в Internet Explorer, потому что это все, что нам разрешено использовать на работе.

Answer 10

Просто используйте border-collapse: collapse для своего стола и padding для th или td.