Питання Встановити поштову скриньку і cellspacing в CSS?


У таблиці HTML, cellpadding і cellspacing можна встановити так:

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

Як це можна досягти за допомогою CSS?


2924
2017-12-04 08:45


походження


Просто загальна пропозиція, перевірте, чи перевіряє ваш стиль.css "скидання" у ваших таблицях, перш ніж намагатися виконати ці рішення. Приклад: якщо у вас немає таблиць width:auto потім border-collapse може не працювати, як очікувалося. - PJ Brunet
Використовуйте інтервал між межами на столі та підкладки на td. - Anubhav


Відповіді:


Основи

Для управління "cellpadding" в CSS ви можете просто використовувати padding на стільницях Наприклад, для 10px "cellpadding":

td { 
    padding: 10px;
}

Для "cellpacing" ви можете застосувати border-spacing CSS властивість для вашого столу. Наприклад, для 10px "cellpacing":

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

Ця властивість навіть дозволить відокремити горизонтальний та вертикальний інтервали, щось неможливо зробити з "cellpacing" старої школи.

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

Це буде працювати майже у всіх популярних браузерах, крім Internet Explorer, через Internet Explorer 7, де вам майже не вдалося. Я кажу "майже", тому що ці браузери все ще підтримують border-collapse властивість, яка об'єднує межі прилеглих стільникових клітин. Якщо ви намагаєтесь уникнути cellpacing (тобто cellspacing="0") потім border-collapse:collapse повинен мати такий самий ефект: відсутність пробілу між клітинками таблиці. Однак ця підтримка є помилкою, оскільки вона не перекриває існуючу cellspacing Атрибут HTML на елемент таблиці.

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

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

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


3227
2017-07-09 02:34



cellpadding = "0" все ще може змінити Chrome 13.0.782.215, навіть якщо колапс кордону: колапс і інтервал між межами застосовуються до таблиці. - Lee
@LeeWhitney вам потрібно встановити padding: 0 на ваші клітинки таблиці. - Martin Ørding-Thomsen
Це трохи відмова від теми, але атрибути cellpadding і cellspacing видаляються в HTML5, тому CSS - це єдиний спосіб перейти зараз. - Ignas2526
Усім привіт. Я оновив відповідь для чіткості, включаючи розділ про кліппіддані, який я вважав очевидним (просто використовуйте "padding"). Сподіваюся, що це більш корисно зараз. - Eric Nguyen
Правда, @ vapcguy, в будь-якій нескінченно зміненій інших ситуаціях ви можете створити таблицю, вам потрібно буде визначити більш конкретні селектори. Вище зазначені як приклади. - Eric Nguyen


За замовчуванням

Поведінка за замовчуванням браузера еквівалентна:

table {border-collapse: collapse;}
td    {padding: 0px;}

enter image description here

Стільниковий палець

Встановлює кількість пробілів між вмістом комірки та стінкою комірки

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 спосіб досягнення цього.


851
2018-06-12 10:24



Як проміжки навколо столу зникають? Коли я встановлюю "інтервал між межами: 8px 12px, він додає інтервал не просто між, а між кордоном таблиці та зовнішніми клітинами! Але це не показано тут у зображеннях, вони вставляються зліва. - Kaz
@ 2astalavista І, на жаль, якщо хтось хоче, щоб ефект зовнішнього інтервалу було видалено, він не буде працювати з цими атрибутами CSS. - Kaz
@Kaz Вам може знадобитися використання негативного поля, щоб приховати цю дратую частину.
Стандартна прошивка на TD, як правило, 1px, а не 0 - Jan M


table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

313
2017-08-24 15:17



Це насправді єдина річ, якою я міг би попрацювати для мене, хоча я застосував інформацію до ідентифікатора, щоб уникнути надто загального. - Kzqai
Це так cellspacing=0 еквівалент Еквівалент для cellspacing=1 це зовсім інше. Див. Прийняту відповідь. - TRiG
Не слід table td і table th просто td і th відповідно? Це працює в будь-якому випадку, але менший селектор означає трохи швидше відповідність - Cole Johnson
@Коле Насправді, я думаю, це повинно бути table > tr > td і table > tr > th. Це майже так само швидко tr і th, і гарантовано працює, якщо у вас є вкладені таблиці. Просто мій 2с - aboveyou00
@ aboveyou00 але є table селектор потрібно? IIRC, a <td> є недійсним, якщо не в межах a <tr>. - Cole Johnson


Налаштування полів на клітинки таблиці насправді не впливає, наскільки я знаю. Справжній CSS еквівалент для cellspacing є border-spacing - але це не працює в Internet Explorer.

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


104
2017-12-04 09:18



У сучасному віці ця реальність - це приплив до N-го ступеня. - John K
Це майже правильно, але border-collapse працює тільки в IE 5-7, якщо в таблиці ще немає cellspacing атрибут визначений Я написав всеосяжну відповідь, яка об'єднує всі правильні частини інших відповідей на цій сторінці, якщо це буде корисним. - Eric Nguyen
Чесно кажучи, хто піклується про Internet Explorer? Той, хто його використовує, повинен знати, що зламані веб-сайти є їх несправність - за використання такого низькоякісного браузера. Веб-сайти не повинні мати справу з цим. Нехай Internet Explorer втрачається. Забудьте про підтримку. Ми цього не потребуємо, і це - біль для розвитку. - Dev


Цей злак працює для Internet Explorer 6 та пізніших версій. Гугл хром, Firefox і Опера:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

The * декларація для Internet Explorer 6 та 7, а інші браузери належним чином ігнорують її.

expression('separate', cellSpacing = '10px') повертає 'separate', але обидва висловлювання запускаються, так як у JavaScript ви можете передавати більше аргументів, ніж очікувалося, і всі вони будуть оцінені.


84
2017-12-05 04:30



для тих, хто намагається реагувати на листування, зауважте, що * не розпізнано Outlook 2007+ (використовує слово як движок рендеринга) campaignmonitor.com/css - ptim


Для тих, хто хоче мати ненульове значення cellpacing, для мене працювало наступне CSS, але я можу перевірити його тільки в Firefox. Див Смутний спосіб посилання опубліковано в іншому місці для деталей сумісності. Схоже, це може не працювати зі старими версіями Internet Explorer.

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

61
2017-08-20 03:32





Простим рішенням цієї проблеми є:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

44
2017-12-08 16:04