È un DIV all'interno di un TD una cattiva idea?

Question

Sembra che ho sentito / letto da qualche parte che un <div> interno di un <td> era un no-no. Non che non funzionerà, solo qualcosa su di loro non essere realmente compatibili in base al loro tipo di visualizzazione. Non riesco a trovare alcuna prova per eseguire il backup mia intuizione, così che io possa essere totalmente sbagliato.

Answer 1

Utilizzo di un div instide un td non è peggiore di qualsiasi altro modo di utilizzare le tabelle per il layout. (Alcune persone non usano tabelle per il layout, però, e mi capita di essere uno di loro.)

Se si utilizza un div in un td si però ottenere in una situazione in cui potrebbe essere difficile prevedere come saranno dimensionati gli elementi. Il valore predefinito per un div è quello di determinare la sua larghezza dal suo genitore, e il valore predefinito per una cella di tabella è quello di determinare la sua dimensione a seconda delle dimensioni del suo contenuto.

Le regole per come un div deve essere dimensionato è ben definita dalle norme, ma le regole per come un td deve essere dimensionato non è ben definita, così diversi browser utilizzano algoritmi leggermente differenti.

Answer 2

Dopo aver controllato il XHTML DTD ho scoperto che una -element è consentito di contenere elementi di blocco, come titoli, liste e anche

-Elementi. Quindi, utilizzando un elemento

all'interno di un -element non viola lo standard XHTML. Sono abbastanza sicuro che altre varianti moderne del linguaggio HTML hanno un modello di contenuto equivalente per il -element.

Ecco le regole DTD rilevanti:

<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

No. Non necessariamente.

Se è necessario inserire un DIV all'interno di un TD, essere sicuri che si sta utilizzando il TD correttamente. Se non si cura di tabulari-dati, e la semantica, quindi in ultima analisi, sarà non si preoccupano DIV in TDs. Non credo che ci sia un problema, però - se si sono di farlo, stai bene

.

In base alla specifica HTML

Un <div> può essere posizionato dove il flusso di contenuti è previsto ¹ , che è il modello di contenuto <td> ² .

Una tabella-cella può legittimamente contenere elementi di blocco così non è, di per sé, un passo falso. implentation Browser, ovviamente, lascia questo una posizione speculativa-teorica. Essa può causare problemi di layout e bug.

Anche se le tabelle sono stati utilizzati per il layout -e sono- a volte ancora mi immagino che la maggior parte dei browser il rendering del contenuto in modo corretto. Anche IE.

Se si desidera utilizzare position: absolute; sul div con position: relative; del TD si incorrere in problemi. FF, Safari e Chrome (Mac, senza PC però) non posizionare il div rispetto al TD (come ci si aspetterebbe) questo è vero anche per i div con display: table-whatever; quindi se si vuole fare questo è necessario due div, uno per il contenitore width: 100%; height: 100%; e nessun confine modo da riempire l'td senza alcun impatto visivo. e poi quello assoluto.

diverso da quello perché non basta dividere la cella?

Ho affrontato il problema mettendo un <div> all'interno <td>.

Non sono riuscito a identificare il div utilizzando document.getElementById() se ho posto che td all'interno. Ma fuori, è stato lavorando bene.

Come tutti accennato, potrebbe non essere una buona idea per il layout. Sono arrivato a questa domanda perché mi chiedevo la stessa e ho solo voluto sapere se sarebbe codice valido.

Dal momento che è valida, è possibile utilizzarlo per altri scopi. Per esempio, che cosa ho intenzione di usarlo per è quello di mettere un po 'di fantasia "cssed" div dentro le righe della tabella e quindi utilizzare una funzione rapida jQuery per consentire all'utente di ordinare le informazioni per prezzo, nome, ecc In questo modo, il solo tabella di layout darà me è l ' "ordine verticale", ma io controllo di larghezza, altezza, sfondo, ecc dei div dal CSS.

Due modi di trattare con esso

1. mettere div all'interno del tag tbody
2. mettere div all'interno del tag tr

Entrambi gli approcci sono validi, se si vede feference: https://stackoverflow.com/a/23440419/2305243

Si rompe semantica , questo è tutto. Funziona bene, ma ci può essere di lettura dello schermo o qualcosa lungo la strada, che non potranno godere l'elaborazione HTML se si "rompe la semantica".

Answer 3

No. Non necessariamente.

Se è necessario inserire un DIV all'interno di un TD, essere sicuri che si sta utilizzando il TD correttamente. Se non si cura di tabulari-dati, e la semantica, quindi in ultima analisi, sarà non si preoccupano DIV in TDs. Non credo che ci sia un problema, però - se si sono di farlo, stai bene

.

In base alla specifica HTML

Un <div> può essere posizionato dove il flusso di contenuti è previsto ¹ , che è il modello di contenuto <td> ² .

Answer 4

Una tabella-cella può legittimamente contenere elementi di blocco così non è, di per sé, un passo falso. implentation Browser, ovviamente, lascia questo una posizione speculativa-teorica. Essa può causare problemi di layout e bug.

Anche se le tabelle sono stati utilizzati per il layout -e sono- a volte ancora mi immagino che la maggior parte dei browser il rendering del contenuto in modo corretto. Anche IE.

Answer 5

Se si desidera utilizzare position: absolute; sul div con position: relative; del TD si incorrere in problemi. FF, Safari e Chrome (Mac, senza PC però) non posizionare il div rispetto al TD (come ci si aspetterebbe) questo è vero anche per i div con display: table-whatever; quindi se si vuole fare questo è necessario due div, uno per il contenitore width: 100%; height: 100%; e nessun confine modo da riempire l'td senza alcun impatto visivo. e poi quello assoluto.

diverso da quello perché non basta dividere la cella?

Answer 6

Ho affrontato il problema mettendo un <div> all'interno <td>.

Non sono riuscito a identificare il div utilizzando document.getElementById() se ho posto che td all'interno. Ma fuori, è stato lavorando bene.

Answer 7

Come tutti accennato, potrebbe non essere una buona idea per il layout. Sono arrivato a questa domanda perché mi chiedevo la stessa e ho solo voluto sapere se sarebbe codice valido.

Dal momento che è valida, è possibile utilizzarlo per altri scopi. Per esempio, che cosa ho intenzione di usarlo per è quello di mettere un po 'di fantasia "cssed" div dentro le righe della tabella e quindi utilizzare una funzione rapida jQuery per consentire all'utente di ordinare le informazioni per prezzo, nome, ecc In questo modo, il solo tabella di layout darà me è l ' "ordine verticale", ma io controllo di larghezza, altezza, sfondo, ecc dei div dal CSS.

Answer 8

Due modi di trattare con esso

1. mettere div all'interno del tag tbody
2. mettere div all'interno del tag tr

Entrambi gli approcci sono validi, se si vede feference: https://stackoverflow.com/a/23440419/2305243

Answer 9

Si rompe semantica , questo è tutto. Funziona bene, ma ci può essere di lettura dello schermo o qualcosa lungo la strada, che non potranno godere l'elaborazione HTML se si "rompe la semantica".