Заполнение строки таблицы - PullRequest
Новая
       27

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

64 голосов
/ 07 сентября 2010 
<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>

Вот как выглядит отступ. Посмотрите, как тд внутри не влияет. Какое решение? Table Row Padding Issue

Ответы [ 6 ]

89 голосов
/ 07 сентября 2010

Хитрость заключается в том, чтобы задать отступ для элементов 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;       
}
15 голосов
/ 04 июня 2014

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

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

6 голосов
/ 07 сентября 2010

дайте тэд отступ

3 голосов
/ 14 июля 2018

Вариант 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 голосов
/ 01 декабря 2018

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

table {
    border-spacing: 15px;
}
0 голосов
/ 25 декабря 2016

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

Ответ : я решил эту проблему, отобразив элемент tr как элемент block , то есть указав 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.
...