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 www-style@w3c.orgMailingliste 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;
}