Die Verwendung eines div
Instides a td
ist 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 div
in a verwenden, werden td
Sie 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 div
die Größe von a sind in den Standards gut definiert, aber die Regeln für td
die Größe von a sind nicht so gut definiert, sodass verschiedene Browser leicht unterschiedliche Algorithmen verwenden.
table-layout:fixed
CSS ist nicht das, was Sie denken. Es reduziert die Anzahl der Berechnungsbrowser beim Rendern von Tabellen, indem nur die Größe der ersten Zeile berechnet wird.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:
quelle
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 1 , bei dem es sich um das<td>
Inhaltsmodell 2 handelt .quelle
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.
quelle
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älterwidth: 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?
quelle
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.quelle
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.
quelle
Zwei Möglichkeiten, damit umzugehen
div
innen -tbody
Tagdiv
innen -tr
TagBeide Ansätze sind gültig, wenn Sie einen Fehler sehen: https://stackoverflow.com/a/23440419/2305243
quelle
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.
quelle