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

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

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

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

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

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

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

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

Основы

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

td { 
    padding: 10px;
}

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

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

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

Проблемы в IE ≤ 7

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

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

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

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

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

См. Ссылку Quirksmodeразмещено в другом месте для подробностей совместимости. Похоже, это может не работать со старыми версиями Internet Explorer.

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

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

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

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

По умолчанию

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

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

Note: If there is border-spacing set, it indicates border-collapse property of the table is separate.

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

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

Оберните содержимое ячейки с помощью 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, потому что это все, что нам разрешено использовать на работе.

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

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

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

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

Я использовал !important после краха-коллапса, как

border-collapse: collapse !important;

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

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

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

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

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

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

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

CSS:

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

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

td { 
    padding: 20px;
}

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

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

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

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

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

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

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

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

<table style = "border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style = "padding: 4px 4px;">Some Text</td>
    </tr>
</table>

Для таблиц интервалы между ячейками и заполнение ячеек в HTML 5 устарели.

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

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

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

Скрипка.

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

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

Для заполнение ячеек:

Просто назовите простую ячейку td/thpadding.

Пример:

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

Пример:

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

Вы можете легко установить отступ внутри ячеек таблицы, используя свойство 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.tbl_classname td, th {
    padding: 5px 5px 5px 4px;
 }

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

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

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

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

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

В обоих случаях добавление ячеек достигается путем назначения padding:10px на td, и в обоих случаях назначенный им 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>