Ist ein DIV in einem TD eine schlechte Idee?

Es scheint, als hätte ich irgendwo gehört / gelesen, dass ein <div>Inneres von a <td>ein Nein-Nein war. Nicht, dass es nicht funktionieren würde, nur etwas daran, dass sie aufgrund ihres Anzeigetyps nicht wirklich kompatibel sind. Ich kann keine Beweise finden, die meine Vermutung stützen, daher kann ich mich völlig irren.

Die Verwendung eines divInstides a tdist nicht schlechter als jede andere Art, Tabellen für das Layout zu verwenden. (Einige Leute verwenden jedoch nie Tabellen für das Layout, und ich bin zufällig einer von ihnen.)

Wenn Sie a divin a verwenden, werden tdSie jedoch in eine Situation geraten, in der es schwierig sein kann, die Größe der Elemente vorherzusagen. Die Standardeinstellung für ein div ist die Bestimmung seiner Breite von seinem übergeordneten Element, und die Standardeinstellung für eine Tabellenzelle ist die Bestimmung ihrer Größe in Abhängigkeit von der Größe ihres Inhalts.

Die Regeln für divdie Größe von a sind in den Standards gut definiert, aber die Regeln für tddie Größe von a sind nicht so gut definiert, sodass verschiedene Browser leicht unterschiedliche Algorithmen verwenden.

Nach Überprüfung der XHTML-DTD stellte ich fest, dass ein <TD> -Element Blockelemente wie Überschriften, Listen und auch <DIV> -Elemente enthalten darf. Die Verwendung eines <DIV> -Elements innerhalb eines <TD> -Elements verstößt daher nicht gegen den XHTML-Standard. Ich bin mir ziemlich sicher, dass andere moderne HTML-Variationen ein äquivalentes Inhaltsmodell für das <TD> -Element haben.

Hier sind die relevanten DTD-Regeln:

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

Nein, nicht unbedingt.

Wenn Sie einen DIV in einem TD platzieren müssen, stellen Sie sicher, dass Sie den TD ordnungsgemäß verwenden. Wenn Sie sich nicht für Tabellendaten und Semantik interessieren, interessieren Sie sich letztendlich nicht für DIVs in TDs. Ich glaube nicht, dass es ein Problem gibt - wenn Sie es tun müssen, geht es Ihnen gut.

Gemäß der HTML-Spezifikation

A <div>kann dort platziert werden, wo der Flussinhalt erwartet wird ¹ , bei dem es sich um das <td>Inhaltsmodell ^{2 handelt} .

Eine Tabellenzelle kann zu Recht Elemente auf Blockebene enthalten, sodass es sich nicht um einen Fauxpas handelt. Die Browser-Implementierung lässt dies natürlich eine spekulativ-theoretische Position. Dies kann zu Layoutproblemen und Fehlern führen.

Obwohl Tabellen für das Layout verwendet wurden - und manchmal immer noch -, stelle ich mir vor, dass die meisten Browser den Inhalt richtig rendern. Sogar IE.

Wenn Sie Position verwenden möchten: absolut; auf dem div mit position: relative;auf dem td werden Sie auf Probleme stoßen. FF, Safari und Chrome (Mac, aber nicht PC) positionieren das Div nicht relativ zum td (wie Sie es erwarten würden). Dies gilt auch für Divs mit. display: table-whatever;Wenn Sie dies tun möchten, benötigen Sie zwei Divs, eines für das Behälter width: 100%; height: 100%;und kein Rand, so füllt es den td ohne visuelle Auswirkungen. und dann der absolute.

anders als das, warum nicht einfach die Zelle teilen?

Ich habe mich dem Problem gestellt, indem ich ein <div>Inneres platziert habe <td>.

Ich konnte das div nicht identifizieren, indem document.getElementById()ich es in td platziere. Aber draußen funktionierte es gut.

Wie bereits erwähnt, ist dies möglicherweise keine gute Idee für Layoutzwecke. Ich bin zu dieser Frage gekommen, weil ich mich das gleiche gefragt habe und nur wissen wollte, ob es sich um einen gültigen Code handelt.

Da es gültig ist, können Sie es für andere Zwecke verwenden. Zum Beispiel werde ich es verwenden, um einige ausgefallene "CSSed" -Divs in Tabellenzeilen einzufügen und dann eine schnelle jQuery-Funktion zu verwenden, damit der Benutzer die Informationen nach Preis, Name usw. sortieren kann Nur die Layout-Tabelle gibt mir die "vertikale Reihenfolge", aber ich werde Breite, Höhe, Hintergrund usw. der Divs per CSS steuern.

Zwei Möglichkeiten, damit umzugehen

1. setzen divinnen - tbodyTag
2. setzen divinnen - trTag

Beide Ansätze sind gültig, wenn Sie einen Fehler sehen: https://stackoverflow.com/a/23440419/2305243

Es bricht die Semantik , das ist alles. Es funktioniert gut, aber es kann Bildschirmleser oder etwas anderes geben, das nicht gerne HTML verarbeitet, wenn Sie die Semantik brechen.