Установить cellpadding и cellspacing в CSS? - PullRequest
Новая
       207

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

3126 голосов
/ 04 декабря 2008

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

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

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

Ответы [ 26 ]

21 голосов
/ 28 апреля 2014

Этот стиль предназначен для полного сброса для таблиц - 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 */
}
21 голосов
/ 26 февраля 2010

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

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

18 голосов
/ 08 января 2014 
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}
17 голосов
/ 16 марта 2014

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

td { 
    padding: 20px;
}

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

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

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

16 голосов
/ 02 июля 2012

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

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

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

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

13 голосов
/ 27 февраля 2014

CSS: 

selector{
    padding:0 0 10px 0; // Top left bottom right 
}
10 голосов
/ 14 июня 2013

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

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

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

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}
9 голосов
/ 02 августа 2017

Вы можете легко установить отступы внутри ячеек таблицы, используя свойство заполнения 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>
9 голосов
/ 14 февраля 2013

Я использовал !important после коллапса границы, как 

border-collapse: collapse !important;

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

8 голосов
/ 03 июля 2016 
<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 .

Страница:
...