это - html cellspacing




Установить cellpadding и cellpacing в CSS? (18)

По умолчанию

Поведение браузера по умолчанию эквивалентно:

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

CELLPADDING

Устанавливает объем пространства между содержимым ячейки и клеточной стеной

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

CELLSPACING

Управляет пространством между ячейками таблицы

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 .

Попробуй сам!

Here вы можете найти старый html-способ достижения этого.

В таблице HTML, cellpadding и cellspacing могут быть установлены следующим образом:

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

Как это можно сделать с помощью CSS?


CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

Вы можете легко установить прописку внутри ячеек таблицы с помощью свойства прошивки CSS, это действительный способ получить тот же эффект, что и атрибут 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>[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>

Аналогичным образом вы можете использовать свойство border-spacing CSS для применения расстояния между соседними границами ячейки таблицы, например атрибутом cellspacing. Однако для того, чтобы работать с интервалом между границами, значение свойства mase границы-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>[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 и 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>


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

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

Из того, что я понимаю из классификаций W3C, заключается в том, что <table> s предназначены для отображения только данных.

Основываясь на этом, мне было намного легче создать <div> с фоном и все такое и иметь таблицу с данными, плавающими над ней, используя position: absolute; и background: transparent; ...

Он работает на Chrome, IE (6 и более поздних) и Mozilla (2 и более поздних).

Поля используются (или подразумеваются в любом случае) для создания разделителя между элементами контейнера, такими как <table> , <div> и <form> , а не <tr> , <td> , <span> или <input> . Использование его для чего-либо, кроме элементов контейнера, позволит вам заняться настройкой вашего сайта для будущих обновлений браузера.


Кроме того, если вы хотите, чтобы cellspacing="0" , не забудьте добавить border-collapse: collapse в table стилей вашей таблицы.


Насколько я знаю, установка полей в ячейках таблицы действительно не имеет никакого эффекта. Истинным эквивалентом CSS для cellspacing является border-spacing но он не работает в Internet Explorer.

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


Попробуй это:

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 для вашей таблицы и padding для th или td


ТВН. Для всех fannying вокруг с помощью CSS вы можете просто использовать cellpadding="0" cellspacing="0" так как они не устарели ...

Любой, кто предлагает маржи на <td> , очевидно, не пробовал этого.


Этот стиль предназначен для полного сброса для таблиц - cellpadding , cellpacing и границ .

У меня был этот стиль в файле 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*/
}

Я использовал !important после краха

border-collapse: collapse !important;

и это работает для меня в IE7. Кажется, он переопределяет атрибут cellspacing.


Просто используйте правила заполнения CSS с данными таблицы:

td { 
    padding: 20px;
}

А для интервала между границами:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

Тем не менее, он может создавать проблемы в более старой версии браузеров, таких как Internet Explorer, из-за различий в использовании модели box.


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

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

<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 может быть задана путем добавления в CSS, в то время как cell-spacing можно установить, установив border-spacing таблицами.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle .


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

td {
    padding: npx; //for cellpadding
    margin: npx; //for cellspacing
    border-collapse: collapse; //for showing borders in a better shape.
}

если margin не работает, попробуйте установить display tr для block и тогда маржа будет работать.





alignment