В таблице HTML cellpadding и cellspacing могут быть установлены следующим образом:
<table cellspacing="1" cellpadding="1">
Как сделать то же самое с помощью CSS?
30 ответов
< Сильный > Основы
Для управления "заполнением ячеек" в CSS вы можете просто использовать padding для ячеек таблицы. Например. для 10 пикселей "cellpadding":
td {
padding: 10px;
}
Для "cellspacing" вы можете применить свойство 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.
Просто используйте border-collapse: collapse для своего стола и padding для th или td.
table th,td {
padding: 8px 2px;
}
table {
border-collapse: separate;
border-spacing: 2px;
}
<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;
}
Для таблиц интервалы между ячейками и заполнение ячеек в HTML 5 устарели.
Теперь для размещения ячеек вам нужно использовать границы. А для cellpadding вы должны использовать border-collapse.
И убедитесь, что вы не используете это в своем коде HTML5. Всегда старайтесь использовать эти значения в файле CSS 3.
table {
border-spacing: 4px;
color: #000;
background: #ccc;
}
td {
padding-left: 4px;
}
В таблице 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>
td { padding: ... } или table { border-spacing: ... } вместо того, чтобы применять его непосредственно к таблице. Те ничего не добавляют. Как я уже сказал, когда у вас есть несколько таблиц на вашей странице и вы не хотите на них влиять, вы этого не хотите! Нам не нужна целая страница с ответами, в которых говорится: «Используйте таблицу стилей!», Хотя, возможно, это последнее, что вам нужно, потому что вам нужно форматирование только для одной ячейки или таблицы. Это когда применение его к table или td нежелательно, а создание для него совершенно нового класса - это излишне.
table#someId).
Это сработало для меня:
table {border-collapse: collapse}
table th, table td {padding: 0}
Я предлагаю это, и все ячейки для конкретной таблицы обрабатываются.
table.tbl_classname td, th {
padding: 5px 5px 5px 4px;
}
По умолчанию
Поведение браузера по умолчанию эквивалентно:
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 для достижения этой цели.
border-spacing:horizontal vertical; тогда как, например, padding:vertical horizontal;.
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
cellspacing=0. Эквивалент для cellspacing=1 совершенно другой. См. Принятый ответ.
Насколько я знаю, установка полей для ячеек таблицы на самом деле не имеет никакого эффекта. Настоящий CSS-эквивалент для cellspacing - border-spacing, но он не работает в Internet Explorer.
Вы можете использовать border-collapse: collapse, чтобы надежно установить интервал между ячейками равным 0, как уже упоминалось, но для любого другого значения, я думаю, единственный кроссбраузерный способ - это продолжать использовать атрибут cellspacing.
border-collapse работает только в IE 5-7, если для таблицы еще не определен атрибут 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, потому что это все, что нам разрешено использовать на работе.
Этот стиль предназначен для полного сброса таблиц - заполнение ячеек , расстояние между ячейками и границы .
В моем файле 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> предназначены только для отображения данных.
Основываясь на этом, я обнаружил, что намного проще создать <div> с фоном и всем остальным и иметь таблицу с плавающими над ним данными, используя position: absolute; и background: transparent; ...
Он работает в 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>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>Попробуй это:
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. Кажется, переопределяет атрибут ячейки.
!important потребуется только для переопределения других настроек CSS в сложной ситуации (и даже тогда в большинстве случаев это неправильный подход).
Предположим, что мы хотим назначить нашей таблице «заполнение ячеек» 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>td {
padding: npx; /* For cellpadding */
margin: npx; /* For cellspacing */
border-collapse: collapse; /* For showing borders in a better shape. */
}
Если margin не работает, попробуйте установить для display из tr значение block, и тогда маржа будет работать.
width:auto, тоborder-collapseможет работать не так, как ожидалось.cellpaddingиcellspacing... что это опять за CSS?" –Мне, почти каждый раз, когда мне нужно это сделать.