Riempire una riga della tabella

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>

Ecco come appare l'imbottitura. Guarda come il td all'interno non è influenzato. Qual è la soluzione? Problema di riempimento riga della tabella

Question 2

Il trucco è dare imbottitura agli tdelementi, ma fare un'eccezione per il primo (sì, è hacky, ma a volte devi giocare secondo le regole del browser):

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

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

Il primo figlio è relativamente ben supportato: https://developer.mozilla.org/en-US/docs/CSS/:first-child

È possibile utilizzare lo stesso ragionamento per il riempimento orizzontale utilizzando tr:first-child td .

In alternativa, escludi la prima colonna utilizzando l' notoperatore . Tuttavia, il supporto per questo non è così buono in questo momento.

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

Question 3

Nelle specifiche CSS 1 e CSS 2 , il riempimento era disponibile per tutti gli elementi, inclusi <tr>. Tuttavia il supporto del riempimento per table-row ( <tr>) è stato rimosso nelle specifiche CSS 2.1 e CSS 3 . Non ho mai trovato la ragione di questo fastidioso cambiamento che influisce anche sulla proprietà margin e su alcuni altri elementi della tabella (intestazione, piè di pagina e colonne).

Aggiornamento: nel febbraio 2015, questo thread sulla www-style@w3c.orgmailing list ha discusso sull'aggiunta del supporto del padding e del bordo per la riga della tabella. Ciò applicherebbe il modello box standard anche agli elementi riga di tabella e colonna di tabella. Permetterebbe tali esempi . Il thread sembra suggerire che il supporto del riempimento delle righe di tabella non è mai esistito negli standard CSS perché avrebbe complicati motori di layout. Nel 30 settembre 2014 Editor's Draft of CSS basic box model, padding e border properties esistono per tutti gli elementi, inclusi gli elementi riga di tabella e colonna di tabella. Se alla fine diventa una raccomandazione W3C, il tuo esempio html + css potrebbe funzionare come previsto nei browser alla fine.

Question 4

dare il padding td

Question 5

opzione 1

Puoi anche risolverlo aggiungendo un bordo trasparente alla riga (tr), in questo modo

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

Funziona come un incantesimo, anche se se hai bisogno di bordi regolari, questo metodo purtroppo non funzionerà.

opzione 2

Poiché le righe agiscono come un modo per raggruppare le celle, il modo corretto per farlo sarebbe usare

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

Question 6

Questo è un post molto vecchio, ma ho pensato di pubblicare la mia soluzione di un problema simile che ho affrontato di recente.

Risposta : Ho risolto questo problema visualizzando l' elemento tr come un elemento di blocco , ovvero specificando un CSS di display: block per l' elemento tr . Puoi vederlo nell'esempio di codice qui sotto.

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

Espandi lo snippet

Question 7

Potresti semplicemente aggiungere questo stile al tavolo.

table {
    border-spacing: 15px;
}