Est une DIV à l'intérieur d'un TD d'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 eux de ne pas être vraiment compatible en fonction de leur type d'affichage. Ne pouvez pas trouver aucune preuve à l'appui de mon intuition, j'ai donc peut-être totalement faux.

InformationsquelleAutor jcollum | 2009-07-10
  1. 140

    À l'aide d'un div instide un td n'est pas pire qu'une autre façon d'utiliser les tableaux pour la mise en page. (Certaines personnes ne jamais utiliser des tableaux pour la mise en page, et j'arrive d'être l'un d'entre eux.)

    Si vous utilisez un div dans un td il vous sera toutefois dans une situation où il pourrait être difficile à prédire la façon dont les éléments sont de taille moyenne. La valeur par défaut pour un div est de déterminer la largeur 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 la façon dont un div doit être de taille est bien défini dans les normes, mais les règles de la façon dont un td doit être de taille n'est pas aussi bien définie, de sorte que les différents navigateurs utilisent des algorithmes légèrement différents.

    • Je suppose que c'est là que mon intuition est venu. Merci pour le dissiper.
    • Si vos colonnes ont une largeur, il ne devrait pas être un problème. N'oubliez pas de set de table-layout:fixe sur la table afin que les navigateurs ne pas remplacer votre largeurs (conduisant potentiellement à problèmes)
    • Il n'a jamais dit qu'il était à l'aide de tableaux pour la mise en page.
    • CSS n'est pas ce que vous pensez qu'elle est. Il réduit les temps de calcul des navigateurs ne lors du rendu des tables de calcul de la taille de la première ligne.
    InformationsquelleAutor Guffa
  2. 70

    Après vérification de la DTD XHTML j'ai découvert qu'un <TD>-élément est autorisé à contenir des éléments de bloc comme les titres, les listes et aussi <DIV>-éléments. Ainsi, à l'aide d'un <DIV>-élément à l'intérieur d'un <TD>-élément à ne pas enfreindre la norme XHTML. Je suis sûr que d'autres variations modernes de HTML ont un équivalent modèle de contenu pour les <TD>-élément.

    Voici les DTD règles:

    <!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">
    • Telle est la réponse que je cherchais. Je vous remercie donc de bien vouloir. J'imagine que je vais dormir un peu mieux ce soir.
    • La seule réponse soutenue par le pec.
    • Merci de partager avec nous où dans la DTD elle explique cette. Il n'est pas facile à lire. Merci!
    • J'ai ajouté pertinentes DTD règles à ma réponse.
    • Qu'en HTML5 spec qui n'est pas du XHTML?
    InformationsquelleAutor Martin Liversage
  3. 37

    Pas. Pas nécessairement.

    Si vous avez besoin de mettre un DIV dans un TD, assurez-vous que vous utilisez le TD correctement. Si vous ne se soucient pas de tableaux de données, et de la sémantique, alors vous en fin de compte se soucient pas de Divisions en TDs. Je ne pense pas qu'il y a un problème - si vous ont de le faire, vous êtes fine.

    Conformément à la Spécification HTML

    Un <div> peut être placé où de contenu de flux est prévuUn, qui est le <td> modèle de contenuDeux.

    • J'ai toujours voulu répondre à une question par un oui ou un non 😉
    • +1 - vraiment envie de répondre avec quelque chose de plus spirituel, mais a échoué.
    • Même si c'est plus upvotes je pense que Guffa soulevé un point qui n'est pas traitée ici (et peut-être la source de mon intuition)
    InformationsquelleAutor Sampson
  4. 14

    Une table-cell peut légitimement contenir des éléments de niveau bloc de sorte qu'il n'est pas, en soi, un faux-pas. Navigateur implentation, bien sûr, les feuilles de cette spéculative-position théorique. Il peut causer des problèmes de mise en page et de bugs.

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

    • Je soupçonne que la mise en oeuvre navigateur est là où j'ai obtenu mon "attendez, c'est une mauvaise idée".
    InformationsquelleAutor David Thomas
  5. 13

    Si vous souhaitez utiliser position: absolute; sur la div avec position: relative; sur la td, vous allez courir dans des problèmes. FF, safari et chrome (mac, pas de PC tout de même) ne sera pas la position de la div par rapport à la td (comme vous pouvez attendre) c'est aussi vrai pour les divs avec display: table-whatever; donc, si vous voulez faire cela, vous avez besoin de deux divisions, l'une pour le conteneur width: 100%; height: 100%; et pas de frontière afin qu'elle remplisse les td sans impact visuel. et puis l'absolu.

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

    • La seule pratique, non holywar répondre
    InformationsquelleAutor zeel
  6. 2

    J'ai rencontré le problème en plaçant un <div> à l'intérieur de <td>.

    J'ai été incapable d'identifier la div à l'aide de document.getElementById() si je la place à l'intérieur de la td. Mais à l'extérieur, il a été fonctionne correctement.

    InformationsquelleAutor Himaja
  7. 1

    Comme tout le monde l'a mentionné, il pourrait ne pas être une bonne idée pour la disposition. Je suis arrivé à cette question parce que je me demandais la même chose et je voulais seulement savoir si il serait valable code.

    Depuis qu'il est valide, vous pouvez l'utiliser pour d'autres fins. Par exemple, ce que je vais l'utiliser pour est de mettre un peu de fantaisie "CSSed" les divisions à l'intérieur des lignes de la table et d'utiliser ensuite un rapide fonction jQuery pour permettre à l'utilisateur de trier les informations par prix, nom, etc. De cette façon, le seul tableau de présentation donnera à moi, c'est le "vertical", mais je vais le contrôle de la largeur, la hauteur, l'arrière-plan, etc de la balise div en CSS.

    InformationsquelleAutor Juan Ignacio
  8. 0

    Deux façons de traiter avec elle

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

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

    InformationsquelleAutor Alan Dong
  9. -4

    Il se casse la sémantique, c'est tout. Il fonctionne très bien, mais il y a peut être des lecteurs d'écran ou quelque chose en bas de la route qui n'en profitez pas de traitement de votre code HTML si vous "casser" sémantique.

    • pourquoi faut-il casser la sémantique? Un div est tout simplement un bloc de niveau de la division ou de la sous-division, du contenu de la page. Comme telle, elle n'est pas essentiellement et de façon irrévocable, anti-sémantique de les placer dans une cellule de tableau.
    • J'ai essayé d'écrire plusieurs réponses, à vous qui justifie ma réponse, mais j'ai tenu à venir en bas de l'opinion personnelle. :/ Je suppose que ma meilleure réponse serait que ce qui est dans votre cellule peut probablement être mieux représenté que par un autre tag HTML. Si vous êtes vraiment pour le partage de vos cellules dans les composants, alors vous ne devriez probablement pas être à l'aide d'une table pour commencer, vous devriez être le style d'une série de DIVs pour votre mise en page. Ne sais pas pourquoi je ne peux pas mettre ce dans les meilleurs mots...la craie jusqu'à mon humble avis, je suppose.
    • Hmm, tu veux dire que l'un TD est sémantiquement la même chose qu'un DIV pourquoi deux d'entre eux dans une rangée?
    • Oui je n'ai pas vraiment d'accord que <div> éléments de l'offre ou de modifier toute information sémantique à tous. Ils ont à peu près la même sémantique de l'information comme un espace vide, seulement dans une direction différente.
    • Je suis entièrement d'accord avec votre sentiment, sent mal. Et aussi je suis d'accord, si les sous-divisions sont nécessaires dans une table-cell, que le contenu est -probablement - être présenté de façon inappropriée. Mais c'est toujours pas intrinsèquement techniquement, ou éthique, ou sémantiquement mal. Je sais que je me sentirais sale bien que... =]
    • Non, je ne dirais pas qu'ils sont sémantiquement identiques. TD est certainement une cellule dans un tableau; c'est une partie d'une structure connue: un tableau de lignes, la ligne a de cellules, les cellules contenant des données. DIV est juste un conteneur ... il peut représenter quoi que ce soit, à tout moment, n'importe où dans le document, vous devez appliquer un style à obtenir toute la sémantique du point de vue de l'objectif du balisage.
    • Un DIV est sémantiquement vide de sens, alors je ne vois pas comment il pourrait être incorrect.
    • Vous ne trouverez pas quelqu'un de plus avec zèle pro-sémantique que moi ici, et une div à l'intérieur d'un td ne fait absolument pas, en soi, casser de la sémantique, surtout en considérant le contenu sémantique d'un div que une division logique. Il pourrait bien être complètement redondant balise de ballonnement dans le spécifique, mais c'est bien dans l'abstrait.
    • J'ai l'impression que si vous utilisez un DIV de diviser le contenu dans une cellule de tableau, alors vous devriez être en utilisant des cellules de tableau. Pensez-y comme une base de données, chaque cellule doit avoir un morceau de données.
    • Par exemple.. disons (comme dans mon exemple ici).. j'ai eu un tas de Jeans "Aménagement des Tailles de tables qui pop dans les auxiliaires modaux. Maintenant dans le Col. d'en-têtes pour toutes les lignes.. le TD est comme ceci <td>la Taille........</td>. Le problème est, comment obtenez-vous l' "...." afin d'élargir et de contrat au sein de la TD. Maintenant vous avez pourquoi nous demandons. vous avez besoin de DIV et de définir l'arrière-plan avec de dépassement et de réglage de coupure.. ou si c'est ce que j'essaie maintenant de faire de ce ajustable TD basé sur la taille du contenu.

    InformationsquelleAutor Greg