Un DIV à l'intérieur d'un TD est-il une mauvaise idée?

Il semble que j'ai entendu / lu quelque part que l' <div>intérieur d'un <td>était un non-non. Non pas que cela ne fonctionnera pas, juste quelque chose à propos d'eux n'étant pas vraiment compatibles en fonction de leur type d'affichage. Je ne trouve aucune preuve pour étayer mon intuition, donc je me trompe peut-être totalement.

Utilisation d'un divinstide atd n'est pas pire que toute autre façon d'utiliser des tableaux pour la mise en page. (Certaines personnes n'utilisent jamais de tableaux pour la mise en page, et il se trouve que je suis l'un d'entre eux.)

Si vous utilisez un divdans un, tdvous vous retrouverez cependant dans une situation où il peut être difficile de prédire la taille des éléments. La valeur par défaut pour un div est de déterminer sa largeur à partir de son parent, et la valeur par défaut pour une cellule de tableau est de déterminer sa taille en fonction de la taille de son contenu.

Les règles de divdimensionnement de a sont bien définies dans les normes, mais les règles de tddimensionnement de a ne sont pas aussi bien définies, de sorte que différents navigateurs utilisent des algorithmes légèrement différents.

Après avoir vérifié la DTD XHTML, j'ai découvert qu'un élément <TD> est autorisé à contenir des éléments de bloc comme des en-têtes, des listes et aussi des éléments <DIV>. Ainsi, l'utilisation d'un élément <DIV> dans un élément <TD> ne viole pas le standard XHTML. Je suis presque sûr que d'autres variantes modernes de HTML ont un modèle de contenu équivalent pour l'élément <TD>.

Voici les règles DTD pertinentes:

<!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">

Non pas forcément.

Si vous devez placer un DIV dans un TD, assurez-vous que vous utilisez correctement le TD. Si vous ne vous souciez pas des données tabulaires et de la sémantique, vous ne vous soucierez finalement pas des DIV dans les TD. Je ne pense pas qu'il y ait de problème - si vous devez le faire, vous allez bien.

Selon la spécification HTML

Un <div>peut être placé là où le contenu du flux est attendu ¹ , qui est le <td>modèle de contenu ² .

Une cellule de table peut légitimement contenir des éléments de niveau bloc, ce n'est donc pas, par nature, un faux-pas. L'implentation du navigateur, bien sûr, laisse à cela une position théorique spéculative. Cela peut entraîner des problèmes de mise en page et des bogues.

Bien que des tableaux aient été utilisés pour la mise en page - et le sont parfois encore - j'imagine que la plupart des navigateurs rendront le contenu correctement. Même IE.

Si vous souhaitez utiliser la position: absolue; sur le div avec position: relative;sur le td, vous rencontrerez des problèmes. FF, safari et chrome (mac, pas PC cependant) ne positionneront pas le div par rapport au td (comme vous vous en doutez) c'est également vrai pour les divs avec display: table-whatever;donc si vous voulez faire cela, vous avez besoin de deux divs, un pour le récipientwidth: 100%; height: 100%; et pas de bordure donc il remplit le td sans aucun impact visuel. puis l'absolu.

autre que cela, pourquoi ne pas simplement diviser la cellule?

J'ai fait face au problème en plaçant un <div>intérieur <td>.

Je n'ai pas pu identifier le div en utilisant document.getElementById()si je le place dans td. Mais à l'extérieur, cela fonctionnait bien.

Comme tout le monde l'a mentionné, ce n'est peut-être pas une bonne idée à des fins de mise en page. Je suis arrivé à cette question parce que je me posais la même question et je voulais seulement savoir si ce serait un code valide.

Puisqu'il est valide, vous pouvez l'utiliser à d'autres fins. Par exemple, je vais l'utiliser pour mettre des divs "CSSed" fantaisistes dans les lignes du tableau, puis utiliser une fonction jQuery rapide pour permettre à l'utilisateur de trier les informations par prix, nom, etc. De cette façon, le seul le tableau de disposition me donnera "l'ordre vertical", mais je contrôlerai la largeur, la hauteur, l'arrière-plan, etc. des divs par CSS.

Deux façons d'y faire face

1. mettre à l' divintérieur de l' tbodyétiquette
2. mettre à l' divintérieur de l' trétiquette

Les deux approches sont valides, si vous voyez feference: https://stackoverflow.com/a/23440419/2305243

Ça casse la sémantique , c'est tout. Cela fonctionne bien, mais il se peut qu'il y ait des lecteurs d'écran ou quelque chose sur la route qui n'apprécieront pas le traitement de votre HTML si vous "rompez la sémantique".