Sembra che io abbia sentito / letto da qualche parte che l' <div>interno di un <td>era un no-no. Non che non funzionerà, solo qualcosa che non è realmente compatibile in base al tipo di display. Non riesco a trovare alcuna prova a sostegno del mio sospetto, quindi potrei sbagliarmi totalmente.
Risposte:
L'uso di un divinstide a tdnon è peggiore di qualsiasi altro modo di usare le tabelle per il layout. (Alcune persone non usano mai le tabelle per il layout, e mi capita di essere uno di loro.)
Se usi a divin a tdti troverai in una situazione in cui potrebbe essere difficile prevedere come verranno dimensionati gli elementi. Il valore predefinito per un div è determinare la sua larghezza dal suo genitore e il valore predefinito per una cella di tabella è determinare la sua dimensione in base alla dimensione del suo contenuto.
Le regole su come divdimensionare una cosa dovrebbero essere ben definite negli standard, ma le regole su come tddimensionare una cosa non dovrebbero essere ben definite, quindi browser diversi usano algoritmi leggermente diversi.
table-layout:fixedCSS non è quello che pensi che sia. Riduce la quantità di calcoli eseguiti dai browser durante il rendering delle tabelle calcolando solo le dimensioni della prima riga.
Dopo aver verificato il DTD XHTML ho scoperto che un elemento <TD> può contenere elementi di blocco come intestazioni, elenchi e anche elementi <DIV>. Pertanto, l'utilizzo di un elemento <DIV> all'interno di un elemento <TD> non viola lo standard XHTML. Sono abbastanza sicuro che altre moderne varianti di HTML abbiano un modello di contenuto equivalente per l'elemento <TD>.
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 posizionare un DIV all'interno di un TD, assicurarsi di utilizzare correttamente il TD. Se non ti interessano i dati tabulari e la semantica, alla fine non ti interesseranno i DIV nei TD. Non credo che c'è un problema, però - se si dispone di farlo, che stai bene.
Secondo le specifiche HTML
A <div>può essere posizionato dove è previsto il contenuto del flusso 1 , che è il <td>modello di contenuto 2 .
Una cella di tabella può contenere legittimamente elementi a livello di blocco, quindi non è intrinsecamente un passo falso. L'implementazione del browser, ovviamente, lascia questa posizione speculativa-teorica. Potrebbe causare problemi di layout e bug.
Sebbene le tabelle siano state utilizzate per il layout, e talvolta lo sono ancora, immagino che la maggior parte dei browser visualizzerà correttamente il contenuto. Anche IE.
Se si desidera utilizzare la posizione: assoluto; sul div con position: relative;su il td ti imbatterai in problemi. FF, safari e chrome (mac, ma non PC) non posizioneranno il div rispetto al td (come ti aspetteresti), questo vale anche per i div, display: table-whatever;quindi se vuoi farlo hai bisogno di due div, uno per il contenitore width: 100%; height: 100%;e nessun bordo in modo da riempire la td senza alcun impatto visivo. e poi quello assoluto.
diverso da quello, perché non dividere la cellula?
Come tutti hanno detto, potrebbe non essere una buona idea per scopi di layout. Sono arrivato a questa domanda perché mi chiedevo lo stesso e volevo solo sapere se sarebbe stato un codice valido.
Dal momento che è valido, puoi usarlo per altri scopi. Ad esempio, quello per cui lo userò è quello di mettere alcuni fantasiosi div "CSSed" all'interno delle righe della tabella e quindi utilizzare una rapida funzione jQuery per consentire all'utente di ordinare le informazioni per prezzo, nome, ecc. In questo modo, il l'unica tabella di layout che mi darà è l '"ordine verticale", ma controllerò la larghezza, l'altezza, lo sfondo, ecc. dei div da CSS.
Due modi per affrontarlo
divall'interno del tbodytagdivall'interno del trtagEntrambi gli approcci sono validi, se vedi feference: https://stackoverflow.com/a/23440419/2305243
Rompe la semantica , tutto qui. Funziona bene, ma potrebbero esserci lettori di schermo o qualcosa lungo la strada che non apprezzeranno l'elaborazione del tuo HTML se "rompi la semantica".