<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>
Вот как выглядит прокладка. Посмотрите, как это не повлияло на тд внутри. Какое решение?
<div>и<p>вместо столаОтветы:
Хитрость заключается в том, чтобы добавить к
tdэлементам отступы , но сделать исключение для первого (да, это хакерский метод, но иногда приходится играть по правилам браузера):td { padding-top:20px; padding-bottom:20px; padding-right:20px; } td:first-child { padding-left:20px; padding-right:0; }Первый ребенок относительно хорошо поддерживается: https://developer.mozilla.org/en-US/docs/CSS/:first-child
Вы можете использовать те же рассуждения для горизонтального заполнения, используя
tr:first-child td.В качестве альтернативы, исключить первый столбец, используя в
notоператор . Однако сейчас поддержка этого не так хороша.td:not(:first-child) { padding-top:20px; padding-bottom:20px; padding-right:20px; }источник
<td>.В спецификациях CSS 1 и CSS 2 отступы были доступны для всех элементов, включая
<tr>. Однако поддержка заполнения для table-row (<tr>) была удалена в CSS 2.1 и CSS 3. спецификациях . Я так и не смог найти причину этого раздражающего изменения, которое также влияет на свойство поля и несколько других элементов таблицы (заголовок, нижний колонтитул и столбцы).Обновление: в феврале 2015 года, этот поток на
www-style@w3c.orgсписок рассылки обсуждается о добавлении поддержки отступов и границ для таблицы-строки. Это применило бы стандартную блочную модель также к элементам таблица-строка и таблица-столбец. Это позволило бы такие примеры . Поток, похоже, предполагает, что поддержка заполнения строкой таблицы никогда не существовала в стандартах CSS, потому что она имела бы сложные механизмы компоновки. В черновике базовой блочной модели CSS от 30 сентября 2014 г. свойства отступов и границ существуют для всех элементов, включая элементы table-row и table-column. Если в конечном итоге он станет рекомендацией W3C, ваш пример html + css может наконец работать в браузерах так, как задумано.источник
дать дополнение td
источник
Опция 1
Вы также можете решить эту проблему, добавив прозрачную рамку к строке (tr), например
HTML
<table> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> </table>CSS
tr { border-top: 12px solid transparent; border-bottom: 12px solid transparent; }Работает как шарм, хотя, если вам нужны регулярные границы, этот метод, к сожалению, не сработает.
Вариант 2
Поскольку строки действуют как способ группировки ячеек, правильный способ сделать это - использовать
table { border-collapse: inherit; border-spacing: 0 10px; }источник
Это очень старый пост, но я подумал, что должен опубликовать свое решение аналогичной проблемы, с которой я недавно столкнулся.
Ответ : Я решил эту проблему, отображая элемент tr как блочный, т.е. указав CSS display: block для элемента tr . Вы можете увидеть это в примере кода ниже.
<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.источник
div.Вы можете просто добавить этот стиль в таблицу.
table { border-spacing: 15px; }источник