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 [email protected]liś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;
}

Answer 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

Answer 2

1

użyj <div>i <p>zamiast stołu

Natrium

Answer 3

35

prezentowane dane są tabelaryczne i powinny być w tabeli

Spencer,

Answer 4

119

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

Joeri Hendrickx
źródło

Użyłbym operatora: not do wykluczenia pojedynczego elementu. like tr: not (#first_row)

jeff

@CengizFrostclaw rzeczywiście, byłoby to bardziej rozsądne. Ale wsparcie nie jest tak dobre.

Joeri Hendrickx

Och, możesz mieć rację. Nie wiem, po prostu ma sens uwierzyć, że: nie operator jest bardziej obsługiwany, ale znowu testuję tylko w Chrome: D

jeff

8

to nie jest „hacky”, to jest dokładnie to, do czego te selektory są przeznaczone

błystki

@spinners, to jest hacky. Nie działa z układem RTL. Utwórz manekin <td>s.

Adam Leggett

Answer 5

Użyłbym operatora: not do wykluczenia pojedynczego elementu. like tr: not (#first_row)

jeff

Answer 6

@CengizFrostclaw rzeczywiście, byłoby to bardziej rozsądne. Ale wsparcie nie jest tak dobre.

Joeri Hendrickx

Answer 7

Och, możesz mieć rację. Nie wiem, po prostu ma sens uwierzyć, że: nie operator jest bardziej obsługiwany, ale znowu testuję tylko w Chrome: D

jeff

Answer 8

8

to nie jest „hacky”, to jest dokładnie to, do czego te selektory są przeznaczone

błystki

Answer 9

@spinners, to jest hacky. Nie działa z układem RTL. Utwórz manekin <td>s.

Adam Leggett

Answer 10

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 [email protected]liś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.

Answer 11

2

Byłbym również bardzo zainteresowany powodem!

Dan,

Answer 12

8

podać dopełnienie td

Moin Zaman
źródło

4

Jedyną rzeczą jest to, że jeśli wewnątrz tr jest 2 td, to będzie wypełnienie między 2 td, czego nie chcę.

Spencer,

Answer 13

4

Jedyną rzeczą jest to, że jeśli wewnątrz tr jest 2 td, to będzie wypełnienie między 2 td, czego nie chcę.

Spencer,

Answer 14

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

Answer 15

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

Answer 16

7

To całkowicie wkręca sposób, w jaki zwykle działa układ stołu. Jeśli to robisz, nie powinieneś używać stołu - użyj zwykłego div.

caesay

Answer 17

-1

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

table {
    border-spacing: 15px;
}

Ifesinachi Bryan
źródło

Wypełnienie wiersza tabeli

Odpowiedzi: