Встановити стільникову панель та простір клітинок у CSS?

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

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

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

Основи

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

td { 
    padding: 10px;
}

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

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

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

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

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

Якщо коротко: для браузерів, які не переглядають 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;}

Стільниковий наклад

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

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таблицю стилів.

Оберніть вміст комірки дівом, і ви можете робити все, що завгодно, але вам потрібно загортати кожну клітинку в стовпчик, щоб отримати рівномірний ефект. Наприклад, щоб просто розширити ліві та праві поля:

Отже, 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, тому що це все, що ми можемо використовувати на роботі.

Просто використовуйте border-collapse: collapseдля свого столу, і paddingдля thабо td.

Цей стиль для повного скидання для таблиць - CELLPADDING , CELLSPACING і кордонів .

Я мав такий стиль у своєму файлі 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>'явно, цього не пробував.

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 Explorer, через різну реалізацію моделі коробки.

Як я розумію з класифікацій W3C, це те, що <table>s призначені для відображення даних "лише".

Виходячи з цього, мені було набагато простіше створити <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. Це дійсний спосіб отримати той же ефект, що і атрибут стільникової таблиці.

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-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. Здається, перекриває атрибут простору клітинок.

<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а потім маржа буде працювати.

Для таблиць простір клітинок та стільникове поле застаріли в HTML 5.

Тепер для простору клітинок вам потрібно використовувати інтервал між межами. А для блокування стільникового зв'язку вам доведеться використовувати межу-колапс.

І переконайтеся, що ви не використовуєте це у своєму коді HTML5. Завжди намагайтеся використовувати ці значення у файлі CSS 3.

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

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

Для набивання клітин :

Просто зателефонуйте до простої 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>

Як щодо додавання стилю безпосередньо до самої таблиці? Це замість використання tableу вашому CSS, який є BAD- підходом, якщо на вашій сторінці є кілька таблиць:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

Я пропоную це, і всі комірки конкретної таблиці виконані.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

Ви можете перевірити наведений нижче код просто створити 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>

ВИХІД: