заполнение строки таблицы

<pre><code><html> <head> <title>table row padding issue</title> <style type="text/css"> tr { padding: 20px; } </style> </head> <body> <table> <tbody> <tr> <td> <h2>lorem ipsum</h2> <p>fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. curabitur sodales risus sit amet neque fringilla feugiat. ut tellus nulla, bibendum at faucibus ut, convallis eget neque. in hac habitasse platea dictumst. nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. curabitur viverra lacus non tortor luctus vitae euismod purus hendrerit. praesent ut venenatis eros. nulla a ligula erat. mauris lobortis tempus nulla non scelerisque.</p> </td> </tr> </tbody> </table> </body> </html> </code></pre><p>вот как выглядит отступ. посмотрите, как тд внутри не влияет. какое решение? <img src="https://i.stack.imgur.com/rrmec.png" alt="table row padding issue"></p>

<p>хитрость заключается в том, чтобы добавить отступы для элементов <code>td</code>, но сделать исключение для первого (да, это хакерство, но иногда приходится играть по правилам браузера):</p><pre><code>td { padding-top:20px; padding-bottom:20px; padding-right:20px; } td:first-child { padding-left:20px; padding-right:0; } </code></pre><p>первый ребенок относительно хорошо поддерживается: <a href="https://developer.mozilla.org/en-us/docs/css/:first-child">https://developer.mozilla.org/en-us/docs/css/:first-child</a> </p><p>вы можете использовать те же рассуждения для горизонтального заполнения, используя <code>tr:first-child td</code>.</p><p>в качестве альтернативы, исключите первый столбец, используя <a href="https://developer.mozilla.org/en-us/docs/web/css/:not">оператор <code>not</code></a> . однако поддержка сейчас не так хороша. </p><pre><code>td:not(:first-child) { padding-top:20px; padding-bottom:20px; padding-right:20px; } </code></pre>

<p>в спецификациях <a href="http://www.w3.org/tr/1999/rec-css1-19990111#padding">css 1</a> и <a href="http://www.w3.org/tr/1998/rec-css2-19980512/box.html#padding-properties">css 2</a> добавление было доступно для всех элементов, включая <code><tr></code>. тем не менее, поддержка отступов для строки таблицы (<code><tr></code>) была удалена в <a href="http://www.w3.org/tr/css21/box.html#padding-properties">css 2.1</a> и <a href="http://www.w3.org/tr/css21/box.html#propdef-padding">css 3</a> спецификации. я никогда не находил причину этого раздражающего изменения, которое также влияет на свойство поля и некоторые другие элементы таблицы (верхний и нижний колонтитулы и столбцы).</p><p>обновление: в феврале 2015 г. <a href="http://lists.w3.org/archives/public/www-style/2015feb/0272.html">эта ветка</a> в списке рассылки <code>www-style@w3c.org</code> обсуждалась возможность добавления поддержки отступов и границы для строки таблицы. это применило бы стандартную блочную модель также к элементам table-row и table-column. это позволило бы <a href="https://imgur.com/a/4sa51">такие примеры</a> . поток, кажется, предполагает, что в стандартах css никогда не было поддержки дополнения строк таблиц, потому что это усложнило бы механизмы компоновки. в 30 сентября 2014 г. <a href="https://drafts.csswg.org/css-box/">черновик редактора</a> базовой css-модели css свойства padding и border существуют для всех элементов, включая элементы table-row и table-column. если это в конечном итоге станет рекомендацией w3c, ваш пример html + css может наконец-то работать так, как задумано в браузерах.</p>

<p>дать тд отступление</p>

<p>вы можете просто добавить этот стиль в таблицу.</p><pre><code>table { border-spacing: 15px; </code></pre><p>}</p>

<p><strong> опция 1 </strong></p><p>вы также можете решить эту проблему, добавив прозрачную границу в строку (tr), например так:</p><p>html</p><pre><code><table> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> </table> </code></pre><p>css</p><pre><code>tr { border-top: 12px solid transparent; border-bottom: 12px solid transparent; } </code></pre><p>работает как шарм, хотя если вам нужны регулярные границы, то этот метод, к сожалению, не будет работать.</p><p><strong> вариант 2 </strong></p><p>поскольку строки действуют как способ группировки ячеек, правильный способ сделать это - использовать</p><pre><code>table { border-collapse: inherit; border-spacing: 0 10px; } </code></pre>

<p>это очень старая публикация, но я подумал, что должен опубликовать свое решение аналогичной проблемы, с которой я недавно столкнулся. </p><p><strong> ответ </strong>: я решил эту проблему, отобразив элемент <em>tr</em> в виде элемента <em>block</em>, т.е. указав css для <em>display: block</em> для элемента <em>tr</em>. вы можете увидеть это в примере кода ниже.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><style> tr { display: block; padding-bottom: 20px; } table { border: 1px solid red; } </style> <table> <tbody> <tr> <td> <h2>lorem ipsum</h2> <p>fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. curabitur sodales risus sit amet neque fringilla feugiat. ut tellus nulla, bibendum at faucibus ut, convallis eget neque. in hac habitasse platea dictumst. nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. curabitur viverra lacus non tortor luctus vitae euismod purus hendrerit. praesent ut venenatis eros. nulla a ligula erat. mauris lobortis tempus nulla non scelerisque. </p> </td> </tr> </tbody> </table> <br> <br>this text is below and outside the table element. notice how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. the key point here is that the tr element must be displayed as a block in order for padding to apply at the tr level.</code></pre> </div> </div> </p>

<p>просто напишите следующий код в свой css файл</p><pre><code>td{ padding: 10px; { </code></pre>