Заповнення рядка таблиці

Question 1

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

Ось як виглядає прокладка. Подивіться, як це не впливає на тд всередині. Яке рішення? Випуск таблиці рядків

Question 2

Фокус полягає в тому, щоб дати заповнення 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;       
}

Question 3

У специфікаціях CSS 1 та CSS 2 доповнення було доступне для всіх елементів, включаючи <tr>. Проте підтримка відступів для табличного рядка ( <tr>) була вилучена в специфікаціях CSS 2.1 та CSS 3 . Я ніколи не знаходив причини цієї надоїдливої зміни, яка також впливає на властивість margin та деякі інші елементи таблиці (верхній, нижній та нижній колонтитули).

Оновлення: у лютому 2015 року цей потік у www-style@w3c.orgсписку розсилки обговорював питання додавання підтримки відступів та меж для рядка таблиці. Це застосовувало б стандартну модель коробки також до елементів рядків таблиць та таблиць-стовпців. Це дозволило б такі приклади . Потік, схоже, припускає, що підтримка заповнення рядків таблиці ніколи не існувала в стандартах CSS, оскільки це мало б складні механізми компонування. У проекті редактора базової коробки CSS від 30 вересня 2014 р. Властивості відступів та меж існують для всіх елементів, включаючи елементи рядка таблиці та таблиці-стовпця. Якщо це врешті-решт стане рекомендацією W3C, ваш приклад html + css може, нарешті, працювати так, як задумано у браузерах.

Question 4

дайте відступ td

Question 5

Варіант 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;
}

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

Розгорніть фрагмент

Question 7

Ви можете просто додати цей стиль до таблиці.

table {
    border-spacing: 15px;
}