wake-up-neo.com

Eine Tabellenzeile auffüllen

<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 der TD innen nicht betroffen ist. Was ist die Lösung?Table Row Padding Issue

htmlcsshtml-tablerowpadding
57
Spencer

Der Trick besteht darin, die td-Elemente aufzufüllen, aber für die ersten eine Ausnahme zu machen (ja, es ist hackig, aber manchmal muss man nach den Regeln des Browsers spielen):

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 Auffüllung verwenden, indem Sie tr:first-child td verwenden.

Alternativ können Sie die erste Spalte ausschließen, indem Sie den Operator not verwenden. Die Unterstützung dafür ist im Moment jedoch nicht so gut. 

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

In den Spezifikationen von CSS 1 und CSS 2 war das Auffüllen für alle Elemente einschließlich <tr> verfügbar. Die Unterstützung für das Auffüllen von Tabellenzeilen (<tr>) wurde in den Spezifikationen CSS 2.1 und CSS 3 entfernt. Ich habe nie den Grund für diese nervige Änderung gefunden, die auch die Margin-Eigenschaft und einige andere Tabellenelemente (Kopfzeile, Fußzeile und Spalten) beeinflusst.

Update: Im Februar 2015 diskutierte dieser Thread in der [email protected]-Mailingliste über das Hinzufügen von Unterstützung für Padding und Rahmen für Tabellenzeilen. 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 von Tabellenzeilen beim CSS-Standard nie vorhanden war, da dies zu komplizierten Layout-Engines geführt hätte. Im 30 September 2014 Editor's Draft of CSS-Basismodellmodell sind Auffüll- und Randeigenschaften für alle Elemente einschließlich Tabellenzeilen- und Tabellenspaltenelementen vorhanden. Wenn es schließlich zu einer W3C-Empfehlung wird, funktioniert Ihr html + css-Beispiel möglicherweise wie beabsichtigt in Browsern.

14
Futal

geben Sie die TD-Polsterung

6
Moin Zaman

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

table {
border-spacing: 15px;

}

1
Ifesinachi Bryan

Option 1

Sie können das Problem auch lösen, indem Sie der Zeile (tr) einen transparenten Rahmen 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, aber wenn Sie regelmäßige Grenzen benötigen, wird diese Methode leider nicht funktionieren.

Option 2

Da Zeilen dazu dienen, Zellen zu gruppieren, wäre dies der richtige Weg, dies zu tun

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}
1
Karl Johan Vallner

Dies ist ein sehr alter Beitrag, aber ich dachte, ich sollte meine Lösung für ein ähnliches Problem posten, dem ich in letzter Zeit begegnet bin. 

Antwort : Ich habe dieses Problem gelöst, indem das tr -Element als Block -Element angezeigt wurde, dh ein CSS von Anzeige: Block für das ( tr Element. 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.

0
Sunil

Schreiben Sie einfach den folgenden Code in Ihre CSS-Datei

td{
  padding: 10px;
{
0
MD.JULHAS HOSSAIN MOHON