Perché il padding non è applicato agli elementi della tabella?

Question

Questo è più di un "dimmi perché non funziona" invece di "aiutami a risolvere il problema". Se provo ad applicare il padding a un elemento thead o tr all'interno di una tabella, non funziona. L'unico modo in cui il padding funziona è se lo applico direttamente all'elemento th o td. Perché è così? C'è un modo semplice per applicare il padding all'intero thead o tr o lo si aggiunge alla th and td l'unica opzione?

<table> 
    <thead> 
     <tr> 
      <th>Destination</th> 
      <th>Size</th> 
      <th>Home Value</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>test 1</td> 
      <td>test 2</td> 
      <td>test 3</td> 
     </tr> 
    </tbody> 
</table> 

Avviso il 10px di imbottitura sul thead.

table { 
    width: 100%; 
} 

thead { 
    text-align: left; 
    background-color: yellow; 
    padding: 10px; 
} 

http://jsfiddle.net/5VQB7/

Answer 1

http://www.w3.org/TR/CSS2/box.html#propdef-padding

'padding'

applica a:tutti gli elementi eccetto table-row-group, table-header-group, table-footer-group, tavolo -row, tabella-colonna-gruppo e tabella-colonna

Answer 2

thead non supportano i CSS attributo "imbottitura" se avete bisogno di applicare CSS in thead poi css modificare come:

thead tr th { 
    text-align: left; 
    background-color: yellow; 
    padding: 10px; 
} 

O

th { 
    text-align: left; 
    background-color: yellow; 
    padding: 10px; 
} 

Answer 3

Try posizionando il padding nell'elemento th. In genere si desidera aggiungere padding all'elemento th o td, a seconda della circostanza.

thead th { 
    padding: 10px; 
} 

Answer 4

vasca sinistra & destra sarebbe sempre lavorare per td o th pure.

Ma, in caso di padding-top & padding-bottom, stai chiedendo al td (o th) di aumentare la sua altezza. Allora che dire dei fratelli ?? Cosa ti aspetti che succeda?

Quindi, per il padding superiore o inferiore per il lavoro, si applica al suo genitore che è la fila di celle.

Answer 5

perché i tag come e non sono pensati per popolare la tabella, ma per contenere altri elementi. lascia chiaro: se vuoi aggiungere un'intestazione alla tua tabella, non la inserirai, invece la aggiungerai dentro, e lo stesso per, se vuoi popolare i dati all'interno di una tabella, dovrai inserirli all'interno

spero che questa risposta chiarire la tua domanda

Answer 6

parte rilevante di CSS 2.1: Tables

Si prega di dare un'occhiata a questo schema: table layers. padding può essere applicato solo a table nel suo insieme o th e td celle afaik. Non dimenticare anche caption.Altri livelli sono abbastanza complicati nei vari algoritmi di layout della tabella da non applicare padding ^^

Ecco un violino http://jsfiddle.net/QB97d/1/ che mostra altre proprietà con cui si può giocare.

• border-spacing: 8px 10px; è come un margine circa ogni cella di una tabella. Sbarazzarsi di esso con border-collapse: collapse;
• attiverà un algoritmo completamente diverso ("rendere larghezze come ti dico a, non si preoccupano della quantità relativa di contenuti in ogni cellula più")
• border è un altro modo di dare spazio attorno agli elementi, intorno padding
• empty-cells: hide può innescare un comportamento speciale

non mostrato in questo violino:

• giocare con i selettori per selezionare i 4 angoli di un tavolo in IE9 + con un elemento thead e sconosciuto tipo di cellula in ogni angolo (vi svelo a trovare i 4 bordi;)):

  • thead th:first-child, thead td:first-child,
  • thead th:last-child, thead td:last-child,
  • tbody:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child
  • tbody:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child

• box-sizing: border-box (e le sue prefissi vendor) per calcolare la larghezza delle celle tenendo conto padding e border larghezze (come IE6 ha fatto in quirks mode, oh ironia ...)