Установить заполнение ячеек и расстояние между ячейками в CSS?

Основы

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

td { 
    padding: 10px;
}

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

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;}

Ячейки

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

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 для достижения этой цели.

Насколько я знаю, установка полей для ячеек таблицы на самом деле не имеет никакого эффекта. Настоящий 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>

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

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

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

В моем файле 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 */
}

TBH. Несмотря на все увлечения CSS, вы можете просто использовать cellpadding="0" cellspacing="0", поскольку они не устарели ...

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

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

td { 
    padding: 20px;
}

И для интервала между границами:

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

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

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

Основываясь на этом, я обнаружил, что намного проще создать <div> с фоном и всем остальным и иметь таблицу с плавающими над ней данными, используя position: absolute; и _4 _...

Он работает в Chrome, Internet Explorer (6 и новее) и Mozilla Firefox (2 и новее).

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

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

Вы можете легко установить отступ внутри ячеек таблицы, используя свойство CSS padding. Это действительный способ произвести тот же эффект, что и атрибут 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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</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. Кажется, переопределяет атрибут ячейки.

<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;
}

Fiddle.

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 устарели.

Теперь для размещения ячеек вам нужно использовать границы. А для cellpadding вы должны использовать border-collapse.

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

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

Для cell-padding:

Просто вызовите простую td/th ячейку padding.

Пример:

/******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;
}

Для интервала ячеек

Просто позвони по простому table border-spacing

Пример:

/********* 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.

Вы можете просто сделать что-то подобное в своем 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 {border-collapse: collapse}
table th, table td {padding: 0}

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

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

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

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

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

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

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

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

table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}

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

Второй способ:

table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}

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