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

Ответ 1

Трюк состоит в том, чтобы дать дополнение к элементам 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;       
}

Ответ 2

В спецификациях CSS 1 и CSS 2 прокладка была доступна для всех элементов, включая <tr>. Однако поддержка дополнений для table-row (<tr>) была удалена в спецификациях CSS 2.1 и CSS 3. Я никогда не нашел причины этого раздражающего изменения, которое также влияет на свойство margin и несколько других элементов таблицы (заголовок, нижний колонтитул и столбцы).

Обновление: в феврале 2015 года этот поток в [email protected] рассылки [email protected] обсуждался о добавлении поддержки заполнения и границы для таблицы-строки. Это применило бы стандартную коробчатую модель к элементам table-row и table-column. Это позволило бы такие примеры. Поток, кажется, предполагает, что поддержка прошивки таблицы-строки никогда не существовала в стандартах CSS, поскольку она имела бы сложные механизмы компоновки. В редакторе 30 сентября 2014 г. Проект базовой базовой модели CSS, свойства прокладки и границы существуют для всех элементов, включая элементы table-row и table-column. Если в конечном итоге это станет рекомендацией W3C, ваш пример html + css может работать, как предполагалось, в браузерах.

Ответ 3

введите td padding

Ответ 4

Опция 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;
}

Ответ 5

Вы можете просто добавить этот стиль в таблицу.

table {
    border-spacing: 15px;
}

Ответ 6

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

Ответ. Я решил эту проблему, показывая 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.

Ответ 7

Просто напишите следующий код в файле CSS

td{
  padding: 10px;
{

Ответ 8

<p> внутри <td> испортит форматирование. Попробуйте удалить его.