Установить cellpadding и cellspacing в CSS?
В HTML-таблице cellpadding и cellspacing можно установить так:
<table cellspacing="1" cellpadding="1">
Как это можно сделать с помощью CSS?
21 ответ
Основы
Для управления "cellpadding" в CSS вы можете просто использовать padding для ячеек таблицы. Например. за 10 пикселей "cellpadding":
td {
padding: 10px;
}
Для "cellspacing" вы можете применить CSS-свойство border-spacing к вашей таблице. Например. за 10 пикселей "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
Это свойство даже позволяет разделять интервалы по горизонтали и вертикали, чего вы не могли бы сделать с помощью "cellspacing" старой школы.
Проблемы в 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 .
По умолчанию
Поведение браузера по умолчанию эквивалентно:
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 для достижения этой цели.
Насколько я знаю, установка полей для ячеек таблицы не имеет никакого эффекта. Истинный CSS-эквивалент для cellspacing - это border-spacing - но это не работает в Internet Explorer.
Вы можете использовать border-collapse: collapse, чтобы надежно установить интервал между ячейками в 0, как уже упоминалось, но для любого другого значения я думаю, что единственный кросс-браузер можно продолжать использовать атрибут cellspacing.
Для тех, кто хочет иметь ненулевое значение в пространстве ячеек, следующий CSS работал для меня, но я могу проверить его только в Firefox. См. Quirksmode ссылку опубликовано в другом месте для подробностей о совместимости. Кажется, он может не работать со старыми версиями Internet Explorer.
table {
border-collapse: separate;
border-spacing: 2px;
}
Кроме того, если вы хотите 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, потому что это все, что нам разрешено использовать на работе.
Просто используйте border-collapse: collapse для своей таблицы и padding для th или td
ТВН. Для всех поклонников CSS вы можете просто использовать cellpadding="0" cellspacing="0", поскольку они не устарели ...
Кто-либо еще, предлагающий поля в <td>, явно не пробовал этого.
Этот стиль предназначен для полного сброса для таблиц - 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*/
}
table th,td {
padding: 8px 2px;
}
table {
border-collapse: separate;
border-spacing: 2px;
}
Из классификации W3C я понимаю, что <table> предназначены для отображения данных «только».
Исходя из этого, я обнаружил, что намного проще создать <div> с фонами и всем этим и иметь таблицу с плавающими данными поверх него, используя position: absolute; и background: transparent; .. .
Он работает в Chrome, IE (6 и более поздних версиях) и Mozilla (2 и более поздних версиях).
Поля используются (или подразумеваются в любом случае) для создания разделителя между элементами контейнера, например, <table>, <div> и <form>, а не <tr>, <td>, <span> или <input>. Используя его для чего-либо, кроме элементов контейнера, вы будете заняты настройкой своего сайта для будущих обновлений браузера.
Просто используйте правила заполнения CSS с данными таблицы:
td {
padding: 20px;
}
И для интервала границы:
table {
border-spacing: 1px;
border-collapse: collapse;
}
Однако это может создать проблемы в старых версиях браузеров, таких как Internet Explorer, из-за различий в реализации блочной модели.
CSS
selector{
padding:0 0 10px 0; // Top left bottom right
}
Попробуйте это:
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.
<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 .
Вы можете легко установить отступ внутри ячеек таблицы, используя свойство заполнения 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>[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>
Для табличных пространств и ячеек в HTML 5 устарели. Теперь для сотового пространства вы должны использовать интервал границы А для мобильного телефона вы должны использовать border-collapse.
И убедитесь, что вы не используете это в своем коде HTML5. Всегда старайтесь использовать эти значения в файле CSS-3.
В HTML-таблице cellpadding и cellspacing можно установить так:
Для заполнения ячеек :
Просто вызовите простую 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
Вы можете просто сделать что-то подобное в своем 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>