Вопрос: Установить cellpadding и cellpacing в CSS?


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

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

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


2885


источник


Ответы:


основы

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

td { 
    padding: 10px;
}

Для «cellpacing» вы можете применить border-spacingСвойство CSS для вашей таблицы. Например. для 10px "cellpacing":

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

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

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

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

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

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

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


3203



По умолчанию

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

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

enter image description here

CELLPADDING

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

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

enter image description here

CELLSPACING

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

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

enter image description here

И то и другое

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

enter image description here

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

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

enter image description here

Заметка: Если там есть border-spacingset, это указывает border-collapseсвойство таблицы separate,

Попробуй сам!

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


839



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

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

310



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

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


102



Этот хак работает для Internet Explorer 6 и более поздних версий, Гугл Хром , Firefox и опера :

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 вы можете передавать больше аргументов, чем ожидалось, и все они будут оцениваться.


82



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

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

60



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

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

42



Also, if you want cellspacing="0", don't forget to add border-collapse: collapse in your table's stylesheet.


38



Wrap the contents of the cell with a div and you can do anything you want, but you have to wrap every cell in a column to get a uniform effect. For example, to just get wider left & right margins:

So the CSS will be,

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>

Yes, it's a hassle. Yes, it works with IE. In fact, I've only tested this with IE, because that's all we're allowed to use at work.


31



Just using border-collapse: collapse for your table, and padding for th or td


14



TBH. For all the fannying around with CSS you might as well just use cellpadding="0" cellspacing="0" since they are not deprecated...

Anyone else suggesting margins on <td>'s obviously has not tried this.


13



This style is for Full Reset for tables - cellpadding, cellspacing and borders.

I had this style in my reset.css file:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px;/*replace cellpadding*/
}

13