Wypełnienie wiersza tabeli

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>

Oto, jak wygląda wypełnienie. Zobacz, jak nie ma to wpływu na td w środku. Jakie jest rozwiązanie? Problem z dopełnieniem wierszy tabeli

Question 2

Sztuczka polega na tym, aby zapewnić dopełnienie tdelementów, ale zrób wyjątek dla pierwszego (tak, to jest hack, ale czasami musisz grać zgodnie z zasadami przeglądarki):

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

Pierwsze dziecko jest stosunkowo dobrze obsługiwane: https://developer.mozilla.org/en-US/docs/CSS/:first-child

Możesz użyć tego samego powodu dla dopełnienia poziomego, używając tr:first-child td.

Alternatywnie, wyłącza pierwszej kolumnie stosując do notoperatora . Jednak wsparcie dla tego nie jest teraz tak dobre.

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}

Question 3

W specyfikacjach CSS 1 i CSS 2 dopełnienie było dostępne dla wszystkich elementów, w tym <tr>. Jednak obsługa wypełniania table-row ( <tr>) została usunięta ze specyfikacji CSS 2.1 i CSS 3 . Nigdy nie znalazłem przyczyny tej irytującej zmiany, która wpływa również na właściwość margin i kilka innych elementów tabeli (nagłówek, stopka i kolumny).

Aktualizacja: w lutym 2015 w tym wątku na www-style@w3c.orgliście dyskusyjnej dyskutowano o dodaniu obsługi dopełnienia i obramowania dla wiersza tabeli. Spowoduje to zastosowanie standardowego modelu pola również do elementów tabela-wiersz i tabela-kolumna. Pozwoliłoby na takie przykłady . Wątek wydaje się sugerować, że obsługa wypełniania wierszy tabeli nigdy nie istniała w standardach CSS, ponieważ miałaby skomplikowane silniki układu. W podstawowym modelu pudełkowym CSS z 30 września 2014 r. W wersji roboczej redakcji, właściwości dopełnienia i obramowania istnieją dla wszystkich elementów, w tym elementów tabela-wiersz i tabela-kolumna. Jeśli w końcu stanie się rekomendacją W3C, Twój przykład html + css może w końcu działać zgodnie z zamierzeniami w przeglądarkach.

Question 4

podać dopełnienie td

Question 5

opcja 1

Możesz również rozwiązać ten problem, dodając przezroczystą ramkę do wiersza (tr), w ten sposób

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

Działa jak urok, chociaż jeśli potrzebujesz regularnych obramowań, ta metoda niestety nie zadziała.

Opcja 2

Ponieważ wiersze służą jako sposób grupowania komórek, prawidłowym sposobem na to byłoby użycie

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}

Question 6

To bardzo stary post, ale pomyślałem, że powinienem opublikować moje rozwiązanie podobnego problemu, z którym miałem ostatnio do czynienia.

Odpowiedź : Rozwiązałem ten problem, wyświetlając element tr jako element blokowy , tj. Określając CSS display: block dla elementu tr . Możesz to zobaczyć na przykładzie kodu poniżej.

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

Rozwiń fragment

Question 7

Możesz po prostu dodać ten styl do tabeli.

table {
    border-spacing: 15px;
}