Auffüllen einer Tabellenzeile

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>

So sieht die Polsterung aus. Sehen Sie, wie das td im Inneren nicht beeinflusst wird. Was ist die Lösung? Problem beim Auffüllen von Tabellenzeilen

Question 2

Der Trick besteht darin, die tdElemente aufzufüllen, aber beim ersten eine Ausnahme zu machen (ja, es ist hackig, aber manchmal muss man sich an die Regeln des Browsers halten):

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

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

Das erste Kind wird relativ gut unterstützt: https://developer.mozilla.org/en-US/docs/CSS/:first-child

Sie können dieselbe Argumentation für die horizontale Polsterung verwenden, indem Sie verwenden tr:first-child td.

Alternativ können Sie die erste Spalte mithilfe des notOperators ausschließen . Die Unterstützung dafür ist derzeit jedoch nicht so gut.

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

Question 3

In den CSS 1- und CSS 2- Spezifikationen war die Auffüllung für alle Elemente verfügbar, einschließlich <tr>. Die Unterstützung des Auffüllens für table-row ( <tr>) wurde jedoch in den CSS 2.1- und CSS 3- Spezifikationen entfernt. Ich habe nie den Grund für diese nervige Änderung gefunden, die sich auch auf die Randeigenschaft und einige andere Tabellenelemente (Kopf-, Fuß- und Spaltenelemente) auswirkt.

Update: Im Februar 2015 wurde in diesem Thread auf der [email protected]Mailingliste das Hinzufügen von Unterstützung für Auffüllen und Rahmen für Tabellenzeilen erörtert. Dies würde das Standard-Box-Modell auch auf Tabellenzeilen- und Tabellenspaltenelemente anwenden. Es würde solche Beispiele erlauben . Der Thread scheint darauf hinzudeuten, dass die Unterstützung für das Auffüllen von Tabellenzeilen in CSS-Standards nie existierte, da dies komplizierte Layout-Engines hätte. Im Entwurf des CSS -Basisboxmodells des Herausgebers vom 30. September 2014 sind für alle Elemente, einschließlich Tabellenzeilen- und Tabellenspaltenelemente, Auffüll- und Rahmeneigenschaften vorhanden. Wenn es sich irgendwann um eine W3C-Empfehlung handelt, funktioniert Ihr HTML + CSS-Beispiel möglicherweise endlich wie vorgesehen in Browsern.

Question 4

Geben Sie die td Polsterung

Question 5

Option 1

Sie können es auch lösen, indem Sie der Zeile (tr) wie folgt einen transparenten Rand hinzufügen

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

Funktioniert wie ein Zauber, obwohl diese Methode leider nicht funktioniert, wenn Sie regelmäßige Ränder benötigen.

Option 2

Da Zeilen als Möglichkeit zum Gruppieren von Zellen dienen, ist die Verwendung dieser Methode die richtige

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

Question 6

Dies ist ein sehr alter Beitrag, aber ich dachte, ich sollte meine Lösung eines ähnlichen Problems veröffentlichen, mit dem ich kürzlich konfrontiert war.

Antwort : Ich habe dieses Problem gelöst, indem ich das tr- Element als Blockelement angezeigt habe, dh ein CSS von display: block für das tr- Element angegeben habe. Sie können dies im folgenden Codebeispiel sehen.

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

Erweitern Sie das Snippet

Question 7

Sie können diesen Stil einfach zur Tabelle hinzufügen.

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>

So sieht die Polsterung aus. Sehen Sie, wie das td im Inneren nicht beeinflusst wird. Was ist die Lösung? Problem beim Auffüllen von Tabellenzeilen

Answer 2

1

benutze <div>und <p>anstelle einer Tabelle

Natrium

Answer 3

33

Die präsentierten Daten sind tabellarisch und sollten in einer Tabelle enthalten sein

Spencer

Answer 4

115

Der Trick besteht darin, die tdElemente aufzufüllen, aber beim ersten eine Ausnahme zu machen (ja, es ist hackig, aber manchmal muss man sich an die Regeln des Browsers halten):

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

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

Das erste Kind wird relativ gut unterstützt: https://developer.mozilla.org/en-US/docs/CSS/:first-child

Sie können dieselbe Argumentation für die horizontale Polsterung verwenden, indem Sie verwenden tr:first-child td.

Alternativ können Sie die erste Spalte mithilfe des notOperators ausschließen . Die Unterstützung dafür ist derzeit jedoch nicht so gut.

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

Joeri Hendrickx
quelle

Ich würde verwenden: nicht Operator zum Ausschließen eines einzelnen Elements. wie tr: nicht (#first_row)

Jeff

@CengizFrostclaw in der Tat, das wäre konsequenter. Aber die Unterstützung ist nicht so gut.

Joeri Hendrickx

Oh, vielleicht hast du recht. Ich weiß nicht, es macht nur Sinn zu glauben, dass: kein Operator mehr unterstützt wird, aber ich

teste

8

Dies ist nicht "hacky", genau dafür sind diese Selektoren konzipiert

Spinner

@spinners das ist hacky. Es funktioniert nicht mit RTL-Layout. Erstellen Sie Dummy <td>s.

Adam Leggett

Answer 5

Ich würde verwenden: nicht Operator zum Ausschließen eines einzelnen Elements. wie tr: nicht (#first_row)

Jeff

Answer 6

@CengizFrostclaw in der Tat, das wäre konsequenter. Aber die Unterstützung ist nicht so gut.

Joeri Hendrickx

Answer 7

Oh, vielleicht hast du recht. Ich weiß nicht, es macht nur Sinn zu glauben, dass: kein Operator mehr unterstützt wird, aber ich

teste

Answer 8

8

Dies ist nicht "hacky", genau dafür sind diese Selektoren konzipiert

Spinner

Answer 9

@spinners das ist hacky. Es funktioniert nicht mit RTL-Layout. Erstellen Sie Dummy <td>s.

Adam Leggett

Answer 10

In den CSS 1- und CSS 2- Spezifikationen war die Auffüllung für alle Elemente verfügbar, einschließlich <tr>. Die Unterstützung des Auffüllens für table-row ( <tr>) wurde jedoch in den CSS 2.1- und CSS 3- Spezifikationen entfernt. Ich habe nie den Grund für diese nervige Änderung gefunden, die sich auch auf die Randeigenschaft und einige andere Tabellenelemente (Kopf-, Fuß- und Spaltenelemente) auswirkt.

Update: Im Februar 2015 wurde in diesem Thread auf der [email protected]Mailingliste das Hinzufügen von Unterstützung für Auffüllen und Rahmen für Tabellenzeilen erörtert. Dies würde das Standard-Box-Modell auch auf Tabellenzeilen- und Tabellenspaltenelemente anwenden. Es würde solche Beispiele erlauben . Der Thread scheint darauf hinzudeuten, dass die Unterstützung für das Auffüllen von Tabellenzeilen in CSS-Standards nie existierte, da dies komplizierte Layout-Engines hätte. Im Entwurf des CSS -Basisboxmodells des Herausgebers vom 30. September 2014 sind für alle Elemente, einschließlich Tabellenzeilen- und Tabellenspaltenelemente, Auffüll- und Rahmeneigenschaften vorhanden. Wenn es sich irgendwann um eine W3C-Empfehlung handelt, funktioniert Ihr HTML + CSS-Beispiel möglicherweise endlich wie vorgesehen in Browsern.

Answer 11

2

Der Grund würde mich auch sehr interessieren!

Dan

Answer 12

9

Geben Sie die td Polsterung

Moin Zaman
quelle

4

Das einzige, was ist, wenn es 2 td in einem tr gibt, dann wird es eine Auffüllung zwischen den 2 td geben, was ich nicht will.

Spencer

Answer 13

4

Das einzige, was ist, wenn es 2 td in einem tr gibt, dann wird es eine Auffüllung zwischen den 2 td geben, was ich nicht will.

Spencer

Answer 14

Option 1

Sie können es auch lösen, indem Sie der Zeile (tr) wie folgt einen transparenten Rand hinzufügen

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

Funktioniert wie ein Zauber, obwohl diese Methode leider nicht funktioniert, wenn Sie regelmäßige Ränder benötigen.

Option 2

Da Zeilen als Möglichkeit zum Gruppieren von Zellen dienen, ist die Verwendung dieser Methode die richtige

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

Answer 15

Dies ist ein sehr alter Beitrag, aber ich dachte, ich sollte meine Lösung eines ähnlichen Problems veröffentlichen, mit dem ich kürzlich konfrontiert war.

Antwort : Ich habe dieses Problem gelöst, indem ich das tr- Element als Blockelement angezeigt habe, dh ein CSS von display: block für das tr- Element angegeben habe. Sie können dies im folgenden Codebeispiel sehen.

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

Erweitern Sie das Snippet

Answer 16

7

Dies hängt völlig damit zusammen, wie das Tabellenlayout normalerweise funktioniert. Wenn Sie dies tun, sollten Sie keine Tabelle verwenden - verwenden Sie eine reguläre div.

Caesay

Answer 17

0

Sie können diesen Stil einfach zur Tabelle hinzufügen.

table {
    border-spacing: 15px;
}

Ifesinachi Bryan
quelle

Auffüllen einer Tabellenzeile

Antworten: