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

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

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

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

2900
задан kokos 04 дек. '08 в 11:45
источник поделиться
26 ответов

Основы

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

td { 
    padding: 10px;
}

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

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

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

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

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

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

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

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

3212
ответ дан Eric Nguyen 09 июля '10 в 5:34
источник поделиться

По умолчанию

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

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-spacing, оно указывает на свойство border-collapse таблицы separate.

Попробуйте сами!

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

844
ответ дан user669677 12 июня '12 в 13:24
источник поделиться
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}
311
ответ дан Pup 24 авг. '09 в 18:17
источник поделиться

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

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

103
ответ дан Will Prescott 04 дек. '08 в 12:18
источник поделиться

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

83
ответ дан Vitalii Fedorenko 05 дек. '11 в 7:30
источник поделиться

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

table {
    border-collapse: separate;
    border-spacing: 2px;
}
61
ответ дан Malvineous 20 авг. '11 в 6:32
источник поделиться

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

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}
43
ответ дан George Filippakos 08 дек. '11 в 19:04
источник поделиться

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

39
ответ дан mat 04 дек. '08 в 12:06
источник поделиться

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

32
ответ дан Robert White 19 июня '12 в 17:57
источник поделиться

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

15
ответ дан Dan 03 янв. '14 в 6:12
источник поделиться

Этот стиль предназначен для Полный Reset для таблиц - cellpadding, cellspacing и границ.. p >

У меня был этот стиль в моем 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*/
}
14
ответ дан Elad Shechter 28 апр. '14 в 18:08
источник поделиться

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

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

14
ответ дан corrector 26 февр. '10 в 14:25
источник поделиться
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}
12
ответ дан Abhishek Singh 08 янв. '14 в 21:16
источник поделиться

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

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

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

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

11
ответ дан RolanDecoy 02 июля '12 в 16:43
источник поделиться

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

td { 
    padding: 20px;
}

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

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

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

10
ответ дан suraj rawat 16 марта '14 в 1:33
источник поделиться

CSS

selector{
    padding:0 0 10px 0; // Top left bottom right 
}
8
ответ дан suraj rawat 27 февр. '14 в 12:03
источник поделиться

Попробуйте следующее:

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

Или попробуйте следующее:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}
7
ответ дан Falguni Panchal 14 июня '13 в 8:51
источник поделиться

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

border-collapse: collapse !important;

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

6
ответ дан Håkan Nilsson 14 февр. '13 в 18:41
источник поделиться
<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.

5
ответ дан Fahad Uddin 03 июля '16 в 16:33
источник поделиться
td {
    padding: npx; //for cellpadding
    margin: npx; //for cellspacing
    border-collapse: collapse; //for showing borders in a better shape.
}

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

3
ответ дан Majid Sadr 24 дек. '14 в 16:33
источник поделиться

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

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

3
ответ дан Pushp Singh 03 июня '16 в 15:03
источник поделиться

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

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

table th,
table td {
 padding: 10px;
 /* Применить прокладку клавиатуры */
}Код>
  <! DOCTYPE html >
< html lang =  "en"  >
< & головка GT;

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

</головка >

& Л; тело >

 < & таблицы GT;
   <THEAD>
     < & тр GT;
       & Л; е > строка </й >
       <th> Имя </th>
       <th> Фамилия </th>
       & Л; й > E-mail </й >
     & Л;/тр >
   </THEAD>
   <TBODY>
     < & тр GT;
       < & тд GT; 1 </& тд GT;
       < & тд GT; Clark & ​​л;/& тд GT;
       < & тд GT; Кент </& тд GT;
       < & тд GT; clarkkent@mail.com</тд >
     & Л;/тр >
     < & тр GT;
       < & тд GT; 2 </тд >
       < & тд GT; Питер </тд >
       & Л; тд > Паркер </& тд GT;
       < & тд GT; peterparker@mail.com</тд >
     & Л;/тр >
     < & тр GT;
       < & тд GT; 3 </& тд GT;
       < & тд GT; Джон </& тд GT;
       < & тд GT; Рэмбо </& тд GT;
       < & тд GT; johnrambo@mail.com</тд >
     & Л;/тр >
   </TBODY>
 </таблица >

</тело >
</HTML>код>

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

  table {
 пограничный коллапс: отдельный;
 интервал между границами: 10 пикселей;
 /* Применение интервала между ячейками */
}

Таблица,
го,
td {
 border: 1px solid # 666;
}

table th,
table td {
 padding: 5px;
 /* Применить прокладку клавиатуры */
}Код>
  <! DOCTYPE html >
< html lang =  "en"  >
< & головка GT;

 < meta charset =  "utf-8"  >
 <title> Установить привязку ячеек в CSS </title>

</головка >

& Л; тело >

 < & таблицы GT;
   <THEAD>
     < & тр GT;
       & Л; е > строка </й >
       <th> Имя </th>
       <th> Фамилия </th>
       & Л; й > E-mail </й >
     & Л;/тр >
   </THEAD>
   <TBODY>
     < & тр GT;
       < & тд GT; 1 </& тд GT;
       < & тд GT; Clark & ​​л;/& тд GT;
       < & тд GT; Кент </& тд GT;
       < & тд GT; clarkkent@mail.com</тд >
     & Л;/тр >
     < & тр GT;
       < & тд GT; 2 </тд >
       < & тд GT; Питер </тд >
       & Л; тд > Паркер </& тд GT;
       < & тд GT; peterparker@mail.com</тд >
     & Л;/тр >
     < & тр GT;
       < & тд GT; 3 </& тд GT;
       < & тд GT; Джон </& тд GT;
       < & тд GT; Рэмбо </& тд GT;
       < & тд GT; johnrambo@mail.com</тд >
     & Л;/тр >
   </TBODY>
 </таблица >

</тело >
</HTML>код>
2
ответ дан Rafiqul Islam 02 авг. '17 в 12:52
источник поделиться
table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}
2
ответ дан user6781634 05 сент. '16 в 10:25
источник поделиться

В таблице 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;
}

Для Сопряжения ячейки

Просто позвоните просто table border-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

1
ответ дан MD Ashik 02 нояб. '16 в 9:58
источник поделиться

Вы можете просто сделать что-то подобное в своем 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>
0
ответ дан Alireza 09 июня '17 в 19:58
источник поделиться

Как добавить стиль непосредственно в таблицу? Это вместо использования table в вашем CSS, который является подходом BAD, если на вашей странице несколько таблиц:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>
-1
ответ дан vapcguy 26 февр. '15 в 8:30
источник поделиться

Другие вопросы по меткам