В таблице HTML параметры cellpadding
и cellspacing
могут быть заданы следующим образом:
<table cellspacing="1" cellpadding="1">
Как то же самое можно сделать с помощью CSS?
Основы
Для управления «cellpadding» в CSS вы можете просто использовать «padding» на ячейках таблицы. Например. за 10 пикселей "клеточной ваты":
td {
padding: 10px;
}
Для «cellspacing» вы можете применить свойство CSS border-spacing
к своей таблице. Например. за 10 пикселей "размещения клеток":
table {
border-spacing: 10px;
border-collapse: separate;
}
Это свойство даже допускает раздельное горизонтальное и вертикальное расстояние, что вы не можете сделать со старой школой "размещения клеток".
Проблемы в IE < = 7
Это будет работать практически во всех популярных браузерах, за исключением Интернета и Интернета, а также через Интернет и Интернет, а также через Интернет, где вам почти не повезло. Я говорю «почти», потому что эти браузеры все еще поддерживают свойство «граничный коллапс», которое объединяет границы соседних табличных ячеек. Если вы пытаетесь устранить cellspacing (то есть cellspacing = "0"
), то border-collapse: collapse
должен иметь тот же эффект: нет пространства между ячейками таблицы. Однако эта поддержка является ошибочной, поскольку она не переопределяет существующий атрибут HTML cellspacing` в элементе таблицы.
Короче говоря: для браузеров, не входящих в Интернет и не входящих в Интернет, 5-7 браузеров, «пограничное пространство» обрабатывает вас. Для Internet & nbsp; Exporer, если ваша ситуация верна (вам нужно 0 cellspacing, а в вашей таблице его еще нет), вы можете использовать border-collapse: collapse
.
table {
border-spacing: 0;
border-collapse: collapse;
}
Примечание. Большой обзор свойств CSS, которые можно применить к таблицам и для каких браузеров, см. В этом фантастическая страница Quirksmode.
Поведение браузера по умолчанию эквивалентно:
table {border-collapse: collapse;}
td {padding: 0px;}
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
Устанавливает количество пространства между содержимым ячейки и клеточной стенкой
table {border-collapse: collapse;}
td {padding: 6px;}
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
Управляет пространством между ячейками таблицы
table {border-spacing: 2px;}
td {padding: 0px;}
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
table {border-spacing: 2px;}
td {padding: 6px;}
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
table {border-spacing: 8px 2px;}
td {padding: 6px;}
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
Примечание: Если установлен
border-spacing
, это указывает на то, что свойствоborder-collapse
таблицыsepartate
.
[Попробуй сам!][6]
Здесь вы можете найти старый способ достижения этого в HTML.
Установка полей для ячеек таблицы, насколько я знаю, не имеет никакого эффекта. Настоящим CSS-эквивалентом для cellspacing
является border-spacing
- но он не работает в Internet Explorer.
Вы можете использовать border-collapse: collapse
, чтобы надежно установить интервал между ячейками равным 0, как уже говорилось, но для любого другого значения, я думаю, единственным кроссбраузерным способом является использование атрибута cellspacing
.
Этот хак работает для Internet & nbsp; Explorer & nbsp; 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 */
}
Декларация *
предназначена для Интернета и nbsp; Исследователи 6 и 7, и другие браузеры будут правильно ее игнорировать.
expression ('separate', cellSpacing = '10px')
возвращает ' separate '
, но оба оператора выполняются, так как в JavaScript вы можете передать больше аргументов, чем ожидалось, и все они будут оценены.
Для тех, кто хочет ненулевое значение cellspacing, следующий CSS работал для меня, но я могу протестировать его только в Firefox.
См. Ссылку Quirksmode опубликовано в другом месте для получения подробной информации о совместимости. Кажется, он может не работать со старыми версиями Internet & nbsp; Explorer.
table {
border-collapse: separate;
border-spacing: 2px;
}
Простое решение этой проблемы:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
Заверните содержимое ячейки с помощью div, и вы сможете делать все, что захотите, но вам нужно обернуть каждую ячейку в столбец, чтобы получить равномерный эффект. Например, чтобы просто получить шире влево & правые поля:
Так что CSS будет
& Лт;!- начать фрагмент: js скрыть: false - >
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>
& Лт;!- конец фрагмента - >
Да, это хлопотно. Да, это работает с Интернетом и NBSP; Исследователь. На самом деле, я проверял это только с помощью Internet & nbsp; Explorer, потому что это все, что нам разрешено использовать на работе.
Просто используйте border-collapse: crash
для вашего стола и padding
для th
или td
.
Этот стиль предназначен для полного сброса таблиц - cellpadding , cellspacing и borders .
У меня был этот стиль в моем файле 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;
}
Просто используйте правила заполнения CSS с табличными данными:
td {
padding: 20px;
}
И для пограничного расстояния:
table {
border-spacing: 1px;
border-collapse: collapse;
}
Однако это может создать проблемы в более старой версии браузеров, таких как Internet & nbsp; Explorer из-за разной реализации модели коробки.
Из классификаций W3C я понимаю, что < table >
s предназначены для отображения только данных.
Исходя из этого, мне было намного проще создать < div >
с фоном и всем этим, а также иметь таблицу с данными, плавающими над ним, используяположение: абсолютное;
ифон: прозрачный;
...
Он работает в Chrome, Internet & nbsp; Explorer (6 и более поздние версии) и Mozilla Firefox (2 и более поздние версии).
Поля используются (или подразумеваются в любом случае) для создания проставки между элементами контейнера, такими как < table >
,< div >
и< form >
, не< tr >
, < span >
или` < .input > ; ; ; ; > ; ; > ; < <. Использование его для чего-либо, кроме элементов контейнера, заставит вас потрудиться настроить свой сайт на будущие обновления браузера.
CSS:
selector{
padding:0 0 10px 0; // Top left bottom right
}
Вы можете легко установить заполнение внутри ячеек таблицы, используя свойство заполнения CSS. Это правильный способ создать тот же эффект, что и атрибут cellpadding таблицы.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
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. Однако для того, чтобы разделить границы, значение музы свойств с коллапсом границы должно быть отдельным, что по умолчанию.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
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>
& Лт;!- конец фрагмента - >
Попробуй это:
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
Или попробуйте это:
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
Я использовал !важно
после границы-коллапса как
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;
}
[Скрипка][1].