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

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

вот как выглядит обивка. Посмотрите, как td внутри не влияет. Каково же решение?

7 51
html css html-table padding cross-browser

7 ответов:

фокус в том, чтобы дать обивка на 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;       
}
79

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

обновление: в феврале 2015 года,этой теме on элемент www-style@w3c.org список рассылки обсуждается о добавлении поддержки заполнения и границы для строки таблицы. Это применит стандартную модель коробки также к элементам table-row и table-column. Это позволило бы таких примеров. Поток, похоже, предполагает, что поддержка заполнения строк таблицы никогда не существовала в стандартах CSS, потому что это усложнило бы механизмы компоновки. В 30 сентября 2014 года редактора CSS basic box model, padding и border свойства существуют для всех элементы, включая элементы таблица-строка и таблица-столбец. Если он в конечном итоге станет рекомендацией W3C, ваш пример html+css может работать, как и предполагалось в браузерах, наконец.

13

дайте td обивка

6

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

ответ: я решил эту проблему, отображая tr элемент блок элемент т. е. указание CSS дисплей:блок на 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.
0

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;
}
0

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

td{
  padding: 10px;
{
0

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

-6