web-dev-qa-db-fra.com

Est-ce qu'une DIV dans un TD est une mauvaise idée?

Il semble que j'ai entendu/lu quelque part qu'un <div> à l'intérieur d'un <td> était un non-non. Non pas que ça ne marchera pas, juste quelque chose sur le fait qu’ils ne sont pas vraiment compatibles en fonction de leur type d’affichage. Je ne trouve aucune preuve qui corrobore mon intuition, alors je peux me tromper totalement.

htmlhtml-tablesemantic-markupweb-standards
137
jcollum

L'utilisation d'un div instide un td n'est pas pire que tout autre moyen d'utiliser des tableaux pour la mise en page. (Certaines personnes n'utilisent jamais de tableaux pour la mise en page, et je suis l'un d'entre eux.)

Si vous utilisez un div dans un td, vous vous retrouverez cependant dans une situation où il pourrait être difficile de prédire comment les éléments seront dimensionnés. La valeur par défaut pour un div consiste à déterminer sa largeur à partir de son parent, et celle d'une cellule de tableau est de déterminer sa taille en fonction de la taille de son contenu.

Les règles de la manière dont un div doit être dimensionné sont bien définies dans les normes, mais les règles de ce que td doit être dimensionné ne sont pas aussi bien définies. Par conséquent, différents navigateurs utilisent des algorithmes légèrement différents.

140
Guffa

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 tels que des en-têtes, des listes et également des éléments <DIV>. Ainsi, utiliser un élément <DIV> à l'intérieur d'un élément <TD> ne viole pas le standard XHTML. Je suis à peu près sûr que d'autres variantes modernes du HTML ont un modèle de contenu équivalent pour l'élément <TD>.

Voici les règles pertinentes de la DTD:

<!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">
70
Martin Liversage

Non pas forcément.

Si vous avez besoin de placer une DIV dans un TD, assurez-vous que vous utilisez correctement le TD. Si vous ne vous souciez pas des données tabulaires ni de la sémantique, alors vous ne le ferez pas. Je ne pense pas qu'il y ait un problème - si vous avez pour le faire, tout va bien.

Selon la spécification HTML

UNE <div> peut être placé là où le contenu du flux est attendu1, qui est le <td> modèle de contenu2.

37
Sampson

Une cellule de tableau peut légitimement contenir des éléments de niveau bloc, ce qui en fait ne constitue pas un faux-pas. La mise en place de navigateur, bien sûr, laisse cela une position spéculative-théorique. Cela pourrait causer des problèmes de mise en page et des bugs.

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

14
David Thomas

Si vous voulez utiliser position: absolute; sur le div avec position: relative; sur le td vous rencontrerez des problèmes. FF, safari et chrome (mac, pas PC cependant)) ne positionnera pas la div par rapport au td (comme on pourrait s'y attendre), cela vaut également pour les div avec display: table-whatever; donc si vous voulez faire cela, vous avez besoin de deux divs, un pour le conteneur width: 100%;height: 100%; et pas de bordure donc il remplit le td sans aucun impact visuel. et puis l'absolu.

autre que cela pourquoi ne pas simplement diviser la cellule?

13
zeel

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

J'étais incapable d'identifier la div en utilisant document.getElementById() si je place cela à l'intérieur de td. Mais dehors, ça fonctionnait bien.

2
Himaja

Comme tout le monde l’a mentionné, cela pourrait ne pas être une bonne idée pour la mise en page. Je suis arrivé à cette question parce que je me demandais la même chose et je voulais seulement savoir si ce serait un code valide.

Comme il est valide, vous pouvez l'utiliser à d'autres fins. Par exemple, je vais l'utiliser pour insérer des div "CSSed" dans les rangées d'un tableau, puis utiliser une fonction jQuery rapide pour permettre à l'utilisateur de trier les informations par prix, nom, etc. De cette manière, seul le tableau de mise en page me donnera l'ordre vertical, mais je vais contrôler la largeur, la hauteur, l'arrière-plan, etc. des divs par CSS.

1
Juan Ignacio

Deux façons de le gérer

  1. mettre div à l'intérieur de la balise tbody
  2. mettre div à l'intérieur de la balise tr

Les deux approches sont valides si vous voyez une exception: https://stackoverflow.com/a/23440419/230524

0
Alan Dong