Verrà visualizzata una riga della tabella se tutte le sue celle sono vuote?

Question

Ho una riga della tabella vuota solo per la separazione tra le righe.

<tr> 
    <td colspan="5"></td> 
</tr> 

È reso in IE, FF, Opera e Safari. La domanda è: se dovrei mettere dei contenuti al suo interno o va bene lasciare così com'è?

come:

<tr> 
    <td colspan="5">&nbsp;</td> 
</tr> 

Answer 1

Ebbene si potrebbe mettere un   come contenuto della colonna per assicurarsi che vengono visualizzate le righe. Il modo migliore è usare comunque i CSS per la spaziatura.

Answer 2

Forse l'hai già provato, ma se cerchi di aggiungere dello spazio tra le righe hai provato ad aggiungere un po 'di padding.

CELLSPACING = Lunghezza (distanza tra le celle)

CELLPADDING = Lunghezza (spaziatura all'interno delle cellule)

Karl

Answer 3

se si vuole mettere contenuto all'interno, vorrei utilizzare un no-breaking-spazio :  , anziché un normale vuoto

Answer 4

Semanticamente, la riga vuota ha uno scopo o è puramente per il layout? In quest'ultimo caso, vale la pena prendere in considerazione la possibilità di rilasciare la riga vuota e fornire la separazione tramite CSS. Per esempio.

<tr class="separate-below"> 
    <td>Data before separater</td><td>More Data</td>... 
</tr> 
<tr> 
    <td>Data after separater</td><td>More Data</td>... 
</tr> 

Con la seguente nel foglio di stile:

TR.separate-below TD,TR.separate-below TH { 
    border-bottom: 1em solid white; /* use the background colour of a cell here */ 
} 

In alternativa, è possibile utilizzare più <tbody> elementi a blocchi del gruppo di righe insieme (aggiungere regole = "gruppi" all'elemento tabella causa <tbody> elementi per ottenere un bordo orizzontale in alto e in basso e <colgroup> elemento per ottenere un bordo a sinistra e a destra):

<table rules="groups"> 
<thead> 
    <tr><th>Header</th><th>Header</th>...</tr> 
</thead> 
<tbody> 
    <tr><td>Data</td><td>Data</td>...</tr> 
    <tr><td>Data</td><td>Data</td>...</tr> 
    ... 
</tbody> 
<tbody> 
    <tr><td>Data</td><td>Data</td>...</tr> 
    ... 
</tbody> 
... 
</table> 

Answer 5

Come si può vedere in this example da W3Schools utilizzando il   è il modo migliore per fare ciò che vuoi.

Answer 6

Per garantire che le celle vuote vengono visualizzati il ​​seguente CSS possono essere utilizzati:

table { empty-cells:show; } 

Answer 7

è possibile utilizzare più tbody i tag per le righe della tabella di gruppo. È totalmente valido e più semantico.

Answer 8

Questa è una domanda molto vecchio, ma se qualcuno ha ancora bisogno di una soluzione (problema esiste con display: table-cell o table-row elements)

ecco la soluzione:

.emptyElement:after{ 
    content: "\00a0"; 
} 

Answer 9

ho voluto aggiungere la mia soluzione, che è un modifica della soluzione di @Dariusz Sikorski.

td:empty:after, th:empty:after { 
    content: "\00a0"; 
}