установить cellpadding и cellspacing в css?

<p>в таблице html <code>cellpadding</code> и <code>cellspacing</code> могут быть установлены следующим образом:</p><pre class="lang-html prettyprint-override"><code><table cellspacing="1" cellpadding="1"> </code></pre><p>как это можно сделать с помощью css?</p>

<p><strong> основы </strong></p><p>для управления "cellpadding" в css, вы можете просто использовать <code>padding</code> в ячейках таблицы. например. за 10 пикселей "cellpadding":</p><pre class="lang-css prettyprint-override"><code>td { padding: 10px; } </code></pre><p>для "cellspacing" вы можете применить css-свойство <code>border-spacing</code> к вашей таблице. например. за 10 пикселей "cellspacing":</p><pre class="lang-css prettyprint-override"><code>table { border-spacing: 10px; border-collapse: separate; } </code></pre><p>это свойство даже допускает раздельные интервалы по горизонтали и вертикали, чего вы не могли бы сделать с "старой клеткой" старой школы.</p><p><strong> проблемы в ie <= 7 </strong></p><p>это будет работать практически во всех популярных браузерах, кроме internet explorer до internet explorer 7, где вам почти не повезло. я говорю "почти", потому что эти браузеры все еще поддерживают свойство <code>border-collapse</code>, которое объединяет границы соседних ячеек таблицы. если вы пытаетесь устранить пробел (то есть <code>cellspacing="0"</code>), то <code>border-collapse:collapse</code> должен иметь тот же эффект: между ячейками таблицы не должно быть пробела. однако эта поддержка содержит ошибки, поскольку она не переопределяет существующий html-атрибут <code>cellspacing</code> в элементе таблицы.</p><p>вкратце: для браузеров не internet explorer 5-7, <code>border-spacing</code> обрабатывает вас. для internet explorer, если ваша ситуация правильная (вам нужно 0 ячеек, а в вашей таблице это еще не определено), вы можете использовать <code>border-collapse:collapse</code>.</p><pre class="lang-css prettyprint-override"><code>table { border-spacing: 0; border-collapse: collapse; } </code></pre><p>примечание. большой обзор свойств css, которые можно применять к таблицам и для каких браузеров, см. на этой странице <a href="http://www.quirksmode.org/css/tables.html">фантастическая страница quirksmode</a> .</p>

<h2>default</h2><p>поведение браузера по умолчанию эквивалентно:</p><pre><code>table {border-collapse: collapse;} td {padding: 0px;} </code></pre><p><img src="https://i.stack.imgur.com/cukle.png" alt="enter image description here"></p><h2>cellpadding</h2><p>устанавливает расстояние между содержимым ячейки и клеточной стенкой</p><pre><code>table {border-collapse: collapse;} td {padding: 6px;} </code></pre><p><img src="https://i.stack.imgur.com/c0ght.png" alt="enter image description here"></p><h2>cellspacing</h2><p>управляет пространством между ячейками таблицы</p><pre><code>table {border-spacing: 2px;} td {padding: 0px;} </code></pre><p><img src="https://i.stack.imgur.com/wnubp.png" alt="enter image description here"></p><h2>и то и другое</h2><pre><code>table {border-spacing: 2px;} td {padding: 6px;} </code></pre><p><img src="https://i.stack.imgur.com/eyzql.png" alt="enter image description here"></p><h2>оба (специальные)</h2><pre><code>table {border-spacing: 8px 2px;} td {padding: 6px;} </code></pre><p><img src="https://i.stack.imgur.com/gbj3t.png" alt="enter image description here"></p><blockquote> <p><strong> примечание: </strong> если установлен <code>border-spacing</code>, это означает, что свойство <code>border-collapse</code> таблицы равно <code>separate</code>.</p> </blockquote><p> <a href="http://jsfiddle.net/h4emk/3303/">попробуйте сами!</a> </p><p> <a href="http://www.htmlcodetutorial.com/tables/index\_famsupp\_29.html">здесь</a> вы можете найти старый html-способ достижения этого.</p>

<pre class="lang-css prettyprint-override"><code>table { border-collapse: collapse; /* 'cellspacing' equivalent */ } table td, table th { padding: 0; /* 'cellpadding' equivalent */ } </code></pre>

<p>насколько я знаю, установка полей в ячейках таблицы не имеет никакого эффекта. истинный эквивалент css для <code>cellspacing</code> - <code>border-spacing</code> - но он не работает в internet explorer.</p><p>вы можете использовать <code>border-collapse: collapse</code>, чтобы надежно установить интервал между ячейками в 0, как уже упоминалось, но для любого другого значения я думаю, что единственный кросс-браузерный способ - это продолжать использовать атрибут <code>cellspacing</code>.</p>

<p>для тех, кто хочет отличное от нуля значение в пространстве ячеек, следующий css работал для меня, но я могу протестировать его только в firefox.</p><p>см. ссылку <a href="http://www.quirksmode.org/css/tables.html">quirksmode</a> <a href="https://stackoverflow.com/questions/339923/how-to-set-cellpadding-and-cellspacing-in-css/3209434#3209434">опубликовано в другом месте</a> для получения подробной информации о совместимости. кажется, он может не работать со старыми версиями internet explorer.</p><pre class="lang-css prettyprint-override"><code>table { border-collapse: separate; border-spacing: 2px; } </code></pre>

<p>простое решение этой проблемы:</p><pre class="lang-css prettyprint-override"><code>table { border: 1px solid #000000; border-collapse: collapse; border-spacing: 0px; } table td { padding: 8px 8px; } </code></pre>

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

<p>оберните содержимое ячейки с помощью div, и вы можете делать все, что захотите, но вы должны обернуть каждую ячейку в столбце, чтобы получить равномерный эффект. например, чтобы просто увеличить ширину левого и правого полей:</p><p>так что css будет,</p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div.cellwidener { margin: 0px 15px 0px 15px; } td.tight { padding: 0px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><table border="0"> <tr> <td class="tight"> <div class="cellwidener">my content</div> </td> </tr> </table></code></pre></div> </div><p>да, это хлопоты. да, это работает с internet explorer. на самом деле, я проверил это только в internet explorer, потому что это все, что нам разрешено использовать на работе.</p>

<p>просто используйте <code>border-collapse: collapse</code> для своей таблицы и <code>padding</code> для <code>th</code> или <code>td</code>.</p>

<p>этот стиль предназначен для <strong>полный сброс для таблиц</strong> - <strong>cellpadding</strong>, <strong>cellspacing</strong> и <strong>border</strong>.</p><p>у меня был этот стиль в моем файле reset.css:</p><pre><code>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 */ } </code></pre>

<p>твн. для всех поклонников css вы можете просто использовать <code>cellpadding="0"</code> <code>cellspacing="0"</code>, поскольку они не устарели ...</p><p>любой другой, предлагающий поля на <code><td></code>, очевидно, не пробовал этого.</p>

<pre><code>table th,td { padding: 8px 2px; } table { border-collapse: separate; border-spacing: 2px; } </code></pre>

<p><strong>просто используйте правила заполнения css с данными таблицы:</strong></p><pre><code>td { padding: 20px; } </code></pre><p>и для интервала границы:</p><pre><code>table { border-spacing: 1px; border-collapse: collapse; } </code></pre><p><strong><em> однако это может создать проблемы в более старых версиях браузеров, таких как internet explorer, из-за различной реализации блочной модели. </em></strong></p>

<p>из классификации w3c я понимаю, что <code><table></code>s предназначен для отображения данных "только".</p><p>исходя из этого, я обнаружил, что намного проще создать <code><div></code> с фонами и тому подобным, а также иметь таблицу с плавающими поверх нее данными, используя <code>position: absolute;</code> и <code>background: transparent;</code>...</p><p>он работает в chrome, internet explorer (6 и более поздних версиях) и mozilla firefox (2 и более поздних версиях).</p><p>поля используются (или подразумеваются в любом случае) для создания разделителя между элементами контейнера, такими как <code><table></code>, <code><div></code> и <code><form></code>, а не <code><tr></code>, <code><td></code>, <code><span></code> или <code><input></code>. используя его для чего-либо, кроме элементов контейнера, вы будете заняты настройкой своего сайта для будущих обновлений браузера.</p>

<p>css:</p><pre><code>selector{ padding:0 0 10px 0; // top left bottom right } </code></pre>

<p>попробуй это:</p><pre class="lang-css prettyprint-override"><code>table { border-collapse: separate; border-spacing: 10px; } table td, table th { padding: 10px; } </code></pre><p>или попробуйте это:</p><pre class="lang-css prettyprint-override"><code>table { border-collapse: collapse; } table td, table th { padding: 10px; } </code></pre>

<p>вы можете легко установить отступы внутри ячеек таблицы, используя свойство заполнения css. это правильный способ создать тот же эффект, что и атрибут cellpadding таблицы.</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>table, th, td { border: 1px solid #666; } table th, table td { padding: 10px; /* apply cell padding */ }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><!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></code></pre></div> </div><p>аналогично, вы можете использовать свойство css border-spacing, чтобы применить интервал между границами соседних ячеек таблицы, как атрибут cellspacing. однако для того, чтобы работать через интервал между границами, значение свойства границы-коллапса должно быть отдельным, что является значением по умолчанию.</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>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 */ }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><!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></code></pre></div> </div>

<p>я использовал <code>!important</code> после бордюра, как</p><pre class="lang-css prettyprint-override"><code>border-collapse: collapse !important; </code></pre><p>и это работает для меня в ie7. кажется, он переопределяет атрибут cellspacing.</p>

<pre><code><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> </code></pre><p><code>cell-padding</code> может быть задан <code>padding</code> в css, в то время как <code>cell-spacing</code> может быть установлен путем установки <code>border-spacing</code> для таблицы.</p><pre><code>table { border-spacing: 10px; } td { padding: 10px; } </code></pre><p> <a href="https://jsfiddle.net/8d93cd60/">fiddle</a> .</p>

<pre><code>td { padding: npx; /* for cellpadding */ margin: npx; /* for cellspacing */ border-collapse: collapse; /* for showing borders in a better shape. */ } </code></pre><p>если <code>margin</code> не работает, попробуйте установить <code>display</code> из <code>tr</code> в <code>block</code>, и тогда поле будет работать.</p>

<p>для таблиц, cellspacing и cellpadding устарели в html 5.</p><p>теперь для клеточного пространства вы должны использовать интервал границы. а для мобильного телефона вы должны использовать border-collapse.</p><p>и убедитесь, что вы не используете это в своем коде html5. всегда старайтесь использовать эти значения в файле css 3.</p>

<pre><code>table { border-spacing: 4px; color: #000; background: #ccc; } td { padding-left: 4px; } </code></pre>

<p>в таблице html <code>cellpadding</code> и <code>cellspacing</code> могут быть установлены следующим образом:</p><p>для <strong> заполнения ячеек </strong>:</p><p>просто вызовите простую ячейку <code>td/th</code> <code>padding</code>.</p><p><strong> пример: </strong></p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>/******call-padding**********/ table { border-collapse: collapse; } td { border: 1px solid red; padding: 10px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre></div> </div><pre><code>table { border-collapse: collapse; } td { border: 1px solid red; padding: 10px; } </code></pre><p>для <strong> межстрочного интервала </strong></p><p>просто вызовите простой <code>table</code> <code>border-spacing</code></p><p><strong> пример: </strong></p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>/********* cell-spacing ********/ table { border-spacing: 10px; border-collapse: separate; } td { border: 1px solid red; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre></div> </div><pre><code>/********* cell-spacing ********/ table { border-spacing: 10px; border-collapse: separate; } td { border: 1px solid red; } </code></pre><p>больше стиля таблицы с помощью ссылки на источник css <a href="http://quirksmode.org/css/css2/tables.html">здесь вы получите больше стиля таблицы с помощью css</a> .</p>

<p>вы можете просто сделать что-то подобное в своем css, используя <code>border-spacing</code> и <code>padding</code>:</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>table { border-collapse: collapse; } td, th { padding: 1em; border: 1px solid blue; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre></div> </div>

<p>как насчет добавления стиля непосредственно к самой таблице? это вместо использования <code>table</code> в вашем css, что является подходом <strong>bad</strong>, если на вашей странице несколько таблиц:</p><pre><code><table style="border-collapse: separate;border-spacing: 2px;"> <tr> <td style="padding: 4px 4px;">some text</td> </tr> </table> </code></pre>