wake-up-neo.com

Ist ein DIV innerhalb eines TD eine schlechte Idee?

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

137
jcollum

Die Verwendung eines div -Instituts für ein td ist nicht schlechter als jede andere Art der Verwendung von Tabellen für das Layout. (Einige Leute verwenden jedoch nie Tabellen für das Layout, und ich bin zufällig einer von ihnen.)

Wenn Sie ein div in einem td verwenden, werden Sie jedoch in eine Situation geraten, in der es schwierig sein kann, die Größe der Elemente vorherzusagen. Der Standardwert für ein div ist das Bestimmen seiner Breite anhand des übergeordneten Elements, und der Standardwert für eine Tabellenzelle ist das Bestimmen der Größe in Abhängigkeit von der Größe des Inhalts.

Die Regeln für die Größe eines div sind in den Standards genau definiert, aber die Regeln für die Größe eines td sind nicht so genau definiert, sodass verschiedene Browser leicht unterschiedliche Algorithmen verwenden.

140
Guffa

Nach Überprüfung der XHTML DTD habe ich festgestellt, dass ein <TD> -Element Blockelemente wie Überschriften, Listen und auch <DIV> -Elemente enthalten darf. Daher verstößt die Verwendung eines <DIV> -Elements in einem <TD> -Element nicht gegen den XHTML-Standard. Ich bin mir ziemlich sicher, dass andere moderne HTML-Varianten ein gleichwertiges 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">
70

Nein, nicht unbedingt.

Wenn Sie einen DIV in einem TD platzieren müssen, vergewissern Sie sich, dass Sie TD) richtig verwenden. Wenn Sie sich nicht für Tabellendaten und Semantik interessieren, werden Sie das letztendlich nicht tun DIVs in TDs interessieren mich. Ich glaube jedoch nicht, dass es ein Problem gibt - wenn Sie es tun müssen , geht es Ihnen gut.

Gemäß der HTML-Spezifikation

EIN <div> kann dort platziert werden, wo Flussinhalt erwartet wird1, das ist der <td> Inhaltsmodell2.

37
Sampson

Eine Tabellenzelle kann legitimerweise Elemente auf Blockebene enthalten, es handelt sich also nicht um einen Fauxpas. Natürlich hinterlässt die Browserimplementierung 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 korrekt wiedergeben. Auch IE.

14
David Thomas

Wenn Sie position verwenden möchten: absolute; 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 erwartet) dies gilt auch für divs mit display: table-whatever; wenn du das machen willst, brauchst du zwei divs, eine für den container width: 100%;height: 100%; und kein Rand, so füllt es das td ohne visuelle Auswirkungen. und dann die absolute.

anders als das, warum nicht einfach die Zelle teilen?

13
zeel

Ich habe das Problem durch Platzieren eines <div> In <td> Gelöst.

Ich konnte das div nicht mit document.getElementById() identifizieren, wenn ich das in td platziere. Aber draußen hat es gut funktioniert.

2
Himaja

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

Da es gültig ist, können Sie es für andere Zwecke verwenden. Ich werde es zum Beispiel verwenden, um einige ausgefallene "CSSed" Divs in Tabellenzeilen einzufügen und dann eine schnelle jQuery-Funktion zu verwenden, mit der 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.

1
Juan Ignacio

Zwei Möglichkeiten, damit umzugehen

  1. setze div in tbody Tag
  2. setze div in tr Tag

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

0
Alan Dong