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

В таблице HTML cellpadding а также cellspacing можно установить так:

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

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

Источник

30 ответов

Решение

основы

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

td { 
    padding: 10px;
}

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

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

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

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

Это будет работать практически во всех популярных браузерах, кроме 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.

Источник

По умолчанию

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

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-способ достижения этого.

Источник 
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}
Источник

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

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

Источник

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

Источник

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

table {
    border-collapse: separate;
    border-spacing: 2px;
}
Источник

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

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}
Источник

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

Источник

Оберните содержимое ячейки с помощью 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>

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

Источник

Этот стиль предназначен для полного сброса для таблиц - cellpadding, cellspacing и border.

У меня был этот стиль в моем файле reset.css:

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*/
}
Источник

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

Источник

ТВН. Для всех поклонников CSS вы можете просто использовать cellpadding="0"cellspacing="0" так как они не устарели...

Любой другой, предлагающий поля на <td>Это явно не пробовал это.

Источник

Просто используйте правила заполнения CSS с табличными данными:

td { 
    padding: 20px;
}

И для интервала границы:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

Однако это может создать проблемы в более старых версиях браузеров, таких как Internet Explorer, из-за различий в реализации блочной модели.

Источник 
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}
Источник

Из того, что я понимаю из классификации W3C является то, что <table>s предназначены для отображения данных "только".

Исходя из этого, мне было гораздо проще создать <div> с фонами и все это и есть таблица с данными, плавающими над ним, используя position: absolute; а также background: transparent;...

Он работает на Chrome, IE(6 и более поздних версиях) и Mozilla(2 и более поздних версиях).

Поля используются (или подразумеваются в любом случае) для создания разделителя между элементами контейнера, например <table>, <div> а также <form>не <tr>, <td>, <span> или же <input>, Используя его для чего-либо, кроме элементов контейнера, вы будете заняты настройкой своего сайта для будущих обновлений браузера.

Источник

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}
Источник

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

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Аналогично, вы можете использовать свойство CSS border-spacing, чтобы применить интервал между границами соседних ячеек таблицы, как атрибут cellspacing. Однако для того, чтобы работать через интервал между границами, значение свойства border-collapse должно быть отдельным, что является значением по умолчанию.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Источник

Попробуй это:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Или попробуйте это:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}
Источник

Я использовал !important после обрушения границы вроде

border-collapse: collapse !important;

и это работает для меня в IE7. Кажется, он переопределяет атрибут cellspacing.

Источник

Предположим, что мы хотим назначить нашей таблице «заполнение ячеек» 10 пикселей и 15 пикселей «пространство ячеек» совместимым с HTML5 способом. Я покажу здесь два метода, дающих действительно похожие результаты.

Два разных набора свойств CSS применяются к одной и той же разметке HTML для таблицы, но с противоположными концепциями:

  • первый использует значение по умолчанию для ( separate) и использует border-spacing чтобы обеспечить пространство между ячейками,

  • второй переключается border-collapse к collapse и использует border свойство как расстояние между ячейками.

В обоих случаях добавление ячеек достигается назначением padding:10px к tds и в обоих случаях background-color присвоено им только ради наглядности демонстрации.

Первый способ:

Источник 
<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-padding может быть дано padding в CSS пока cell-spacing можно установить, установив border-spacing за столом.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Скрипка

Источник 
td {
    padding: npx; //for cellpadding
    margin: npx; //for cellspacing
    border-collapse: collapse; //for showing borders in a better shape.
}

если margin не работает, попробуйте установить display из tr в block и тогда маржа будет работать.

Источник

Для табличного пространства ячеек и ячеек в HTML 5 устарели. Теперь для ячеек пространства вы должны использовать интервал границы И для ячеек, вы должны использовать border-collapse.

И убедитесь, что вы не используете это в своем коде HTML5. Всегда старайтесь использовать эти значения в файле CSS-3.

Источник

В таблице HTML cellpadding а также cellspacing можно установить так:

Для Cell-Padding: просто позвоните просто td/th клетка padding

EX:

/******Call-Padding**********/

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}
<table>
  <tr>
   <th>Head1 </th>
   <th>Head2 </th>
   <th>Head3 </th>
   <th>Head4 </th>
  </tr>
  <tr>
   <td>11</td>
   <td>12</td>
   <td>13</td>
   <td>14</td>
  </tr>
  <tr>
   <td>21</td>
   <td>22</td>
   <td>23</td>
   <td>24</td>
  </tr>
  <tr> 
   <td>31</td>
   <td>32</td>
   <td>33</td>
   <td>34</td>
  </tr>
  <tr>
   <td>41</td>
   <td>42</td>
   <td>43</td>
   <td>44</td>
  </tr>
 </table>

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

Для сотовых интервалов

Просто позвони просто tableborder-spacing

EX:

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}
<table>
  <tr>
   <th>Head1</th>
   <th>Head2</th>
   <th>Head3</th>
   <th>Head4</th>
  </tr>
  <tr>
   <td>11</td>
   <td>12</td>
   <td>13</td>
   <td>14</td>
  </tr>
  <tr>
   <td>21</td>
   <td>22</td>
   <td>23</td>
   <td>24</td>
  </tr>
  <tr> 
   <td>31</td>
   <td>32</td>
   <td>33</td>
   <td>34</td>
  </tr>
  <tr>
   <td>41</td>
   <td>42</td>
   <td>43</td>
   <td>44</td>
  </tr>
 </table>

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}

Больше стиля таблицы по ссылке источника CSS здесь вы получите больше стиля таблицы по CSS

Источник 
table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}
Источник

Вы можете просто сделать что-то подобное в своем CSS, используя border-spacing а также padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

Источник

Вы можете проверить приведенный ниже код, просто создайте index.html и запустите его.

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      border-spacing: 10px;
    }
    
    td {
      padding: 10px;
    }
  </style>
</head>

<body>
  <table cellspacing="0" cellpadding="0">
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
</body>

</html>

ВЫХОД:

Источник

Как насчет добавления стиля непосредственно к самой таблице? Это вместо использования table в вашем CSS, который является ПЛОХИМ подходом, если у вас есть несколько таблиц на вашей странице:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>
Источник

Я предлагаю это, и все ячейки для конкретной таблицы обрабатываются.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

Источник

Это сработало для меня:

      table {border-collapse: collapse}
table th, table td {padding: 0}
Источник
Другие вопросы по тегам