Установить cellpadding и cellspacing в CSS?

В HTML-таблице cellpadding и cellspacing можно установить так:

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

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

3034 голоса | спросил kokos 4 ThuEurope/Moscow2008-12-04T11:45:47+03:00Europe/Moscow12bEurope/MoscowThu, 04 Dec 2008 11:45:47 +0300 2008, 11:45:47

21 ответ


0

Основы

Для управления "cellpadding" в CSS вы можете просто использовать padding для ячеек таблицы. Например. за 10 пикселей "cellpadding":

 td { 
    padding: 10px;
}

Для "cellspacing" вы можете применить CSS-свойство border-spacing к вашей таблице. Например. за 10 пикселей "cellspacing":

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

Это свойство даже позволяет разделять интервалы по горизонтали и вертикали, чего вы не могли бы сделать с помощью "cellspacing" старой школы.

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

Это будет работать практически во всех популярных браузерах, кроме Internet Explorer до Internet Explorer 7, где вам почти не повезло. Я говорю «почти», потому что эти браузеры по-прежнему поддерживают свойство border-collapse, которое объединяет границы соседних ячеек таблицы. Если вы пытаетесь устранить пробел в ячейках (то есть cellspacing="0"), тогда border-collapse:collapse должен иметь тот же эффект: между ячейками таблицы не должно быть пробела. Однако эта поддержка содержит ошибки, поскольку она не переопределяет существующий HTML-атрибут cellspacing в элементе таблицы.

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

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

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

ответил Eric Nguyen 9 J000000Friday10 2010, 06:34:02
0

По умолчанию

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

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.

Попробуйте сами!

Здесь вы можете найти старый способ html для достижения этой цели.

ответил 12 J0000006Europe/Moscow 2012, 14:24:17
0

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

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

ответил Will Prescott 4 ThuEurope/Moscow2008-12-04T12:18:10+03:00Europe/Moscow12bEurope/MoscowThu, 04 Dec 2008 12:18:10 +0300 2008, 12:18:10
0

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

 table {
    border-collapse: separate;
    border-spacing: 2px;
}
ответил Malvineous 20 AM00000070000005931 2011, 07:32:59
0

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

ответил mat 4 ThuEurope/Moscow2008-12-04T12:06:50+03:00Europe/Moscow12bEurope/MoscowThu, 04 Dec 2008 12:06:50 +0300 2008, 12:06:50
0

Оберните содержимое ячейки с помощью 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>

Да, это хлопоты. Да, это работает с IE. На самом деле, я тестировал это только в IE, потому что это все, что нам разрешено использовать на работе.

ответил Robert White 19 J0000006Europe/Moscow 2012, 18:57:56
0

Просто используйте border-collapse: collapse для своей таблицы и padding для th или td

ответил Dan 3 Jam1000000amFri, 03 Jan 2014 07:12:02 +040014 2014, 07:12:02
0

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

Кто-либо еще, предлагающий поля в <td>, явно не пробовал этого.

ответил corrector 26 FebruaryEurope/MoscowbFri, 26 Feb 2010 14:25:10 +0300000000pmFri, 26 Feb 2010 14:25:10 +030010 2010, 14:25:10
0

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

У меня был этот стиль в моем файле 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*/
}
ответил Elad Shechter 28 PMpMon, 28 Apr 2014 19:08:06 +040008Monday 2014, 19:08:06
0
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}
ответил Abhishek Singh 8 Jpm1000000pmWed, 08 Jan 2014 22:16:33 +040014 2014, 22:16:33
0

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

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

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

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

ответил RolanDecoy 2 J000000Monday12 2012, 17:43:15
0

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

td { 
    padding: 20px;
}

И для интервала границы:

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

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

ответил suraj rawat 16 MaramSun, 16 Mar 2014 02:33:41 +04002014-03-16T02:33:41+04:0002 2014, 02:33:41
0

CSS

selector{
    padding:0 0 10px 0; // Top left bottom right 
}
ответил suraj rawat 27 FebruaryEurope/MoscowbThu, 27 Feb 2014 13:03:37 +0400000000pmThu, 27 Feb 2014 13:03:37 +040014 2014, 13:03:37
0

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

 table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Или попробуйте это:

 table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}
ответил Falguni Panchal 14 J0000006Europe/Moscow 2013, 09:51:42
0

Я использовал !important после срыва границы как

 border-collapse: collapse !important;

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

ответил Håkan Nilsson 14 FebruaryEurope/MoscowbThu, 14 Feb 2013 19:41:57 +0400000000pmThu, 14 Feb 2013 19:41:57 +040013 2013, 19:41:57
0
<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;
}

Fiddle .

ответил Fahad Uddin 3 J000000Sunday16 2016, 16:33:59
0

Вы можете легко установить отступ внутри ячеек таблицы, используя свойство заполнения 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>

Точно так же вы можете использовать свойство CSS border-spacing, чтобы применить интервал между границами соседних ячеек таблицы, как атрибут cellspacing. Тем не менее, для работы с разделением границ значение свойства 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>[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>
ответил Rafiqul Islam 2 PM000000120000003231 2017, 12:52:32
0

Для табличных пространств и ячеек в HTML 5 устарели. Теперь для сотового пространства вы должны использовать интервал границы А для мобильного телефона вы должны использовать border-collapse.

И убедитесь, что вы не используете это в своем коде HTML5. Всегда старайтесь использовать эти значения в файле CSS-3.

ответил Pushp Singh 3 J0000006Europe/Moscow 2016, 15:03:26
0
table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}
ответил 5 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 05 Sep 2016 10:25:41 +0300 2016, 10:25:41
0

В HTML-таблице cellpadding и cellspacing можно установить так:

Для заполнения ячеек : Просто вызовите простую 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>
table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

Для ячеек

Просто позвоните по простому table border-spacing

EX:

 /********* 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

ответил MD Ashik 2 32016vEurope/Moscow11bEurope/MoscowWed, 02 Nov 2016 09:58:13 +0300 2016, 09:58:13
0

Вы можете просто сделать что-то подобное в своем 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>
ответил Alireza 9 J0000006Europe/Moscow 2017, 19:58:06

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132