В таблице HTML cellpadding
и cellspacing
могут быть установлены следующим образом:
<table cellspacing="1" cellpadding="1">
Как это можно сделать с помощью CSS?
В таблице HTML cellpadding
и cellspacing
могут быть установлены следующим образом:
<table cellspacing="1" cellpadding="1">
Как это можно сделать с помощью CSS?
Основы
Для управления "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.
Поведение браузера по умолчанию эквивалентно:
table {border-collapse: collapse;}
td {padding: 0px;}
Устанавливает объем пространства между содержимым ячейки и стеной ячейки
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 для достижения этого.
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
Настройка полей в ячейках таблицы на самом деле не имеет никакого эффекта, насколько я знаю. Истинным эквивалентом CSS для cellspacing
является border-spacing
- но он не работает в Internet Explorer.
Вы можете использовать border-collapse: collapse
, чтобы надежно установить расстояние между ячейками до 0, как упоминалось, но для любого другого значения, я думаю, единственный способ перекрестного браузера - использовать атрибут 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>
Просто используя border-collapse: collapse
для вашей таблицы и padding
для th
или td
ТВН. Для всех fannying вокруг с помощью CSS вы можете просто использовать cellpadding="0"
cellspacing="0"
, поскольку они не устарели...
Любой, кто предлагает маржи на <td>
, очевидно, не пробовал это.
Этот стиль предназначен для Полный 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*/
}
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;
}
td {
padding: npx; //for cellpadding
margin: npx; //for cellspacing
border-collapse: collapse; //for showing borders in a better shape.
}
Если margin
не работает, попробуйте установить display
с tr
на block
, а затем поле будет работать.
Для таблиц cellpacing и cellpadding устарели в HTML 5. Теперь для ячейки необходимо использовать интервал между границами И для cellpadding вы должны использовать border-collapse.
И убедитесь, что вы не используете это в своем коде HTML5. Всегда старайтесь использовать эти значения в файле CSS-3.
table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}
Вы можете легко установить прописку внутри ячеек таблицы с помощью свойства прошивки 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; [email protected]</тд >
& Л;/тр >
< & тр GT;
< & тд GT; 2 </тд >
< & тд GT; Питер </тд >
& Л; тд > Паркер </& тд GT;
< & тд GT; [email protected]</тд >
& Л;/тр >
< & тр GT;
< & тд GT; 3 </& тд GT;
< & тд GT; Джон </& тд GT;
< & тд GT; Рэмбо </& тд GT;
< & тд GT; [email protected]</тд >
& Л;/тр >
</TBODY>
</таблица >
</тело >
</HTML>код>
В таблице 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>
Вы можете просто сделать что-то подобное в своем 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>
Как добавить стиль непосредственно в таблицу? Это вместо использования table
в вашем CSS, который является подходом BAD, если на вашей странице несколько таблиц:
<table style="border-collapse: separate;border-spacing: 2px;">
<tr>
<td style="padding: 4px 4px;">Some Text</td>
</tr>
</table>