Auffüllen einer Tabellenzeile

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

Spencer
quelle
1
benutze <div>und <p>anstelle einer Tabelle
Natrium
33
Die präsentierten Daten sind tabellarisch und sollten in einer Tabelle enthalten sein
Spencer

Antworten:

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
26

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.

Futal
quelle
2
Der Grund würde mich auch sehr interessieren!
Dan
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
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;
}
Karl Johan Vallner
quelle
0

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.

Sunil
quelle
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
0

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

table {
    border-spacing: 15px;
}
Ifesinachi Bryan
quelle