web-dev-qa-db-ja.com

TD内のDIVは悪い考えですか？

どこかで<div>の中の<td>がノーであると聞いた/読んだようです。機能しないわけではなく、ディスプレイの種類に基づいて実際に互換性がないということだけです。私の考えを裏付ける証拠が見つからないので、私はまったく間違っているかもしれません。

htmlhtml-tablesemantic-markupweb-standards
137
jcollum

div instide a tdを使用することは、レイアウトにテーブルを使用する他の方法より悪くありません。 （ただし、レイアウトにテーブルを使用しない人もいます。私はたまたまその1つです。）

ただし、divでtdを使用すると、要素のサイズを予測するのが困難になる可能性があります。 divのデフォルトは、その親からの幅を決定することであり、テーブルセルのデフォルトは、コンテンツのサイズに応じてサイズを決定することです。

divのサイズ設定の規則は標準で適切に定義されていますが、tdのサイズ設定の規則はあまり定義されていないため、ブラウザによってわずかに異なるアルゴリズムが使用されます。

140
Guffa

XHTML DTD を確認した後、<TD>要素には、見出し、リスト、および<DIV>要素などのブロック要素を含めることができることがわかりました。したがって、<TD>要素内で<DIV>要素を使用しても、XHTML標準に違反しません。 HTMLの他の最新のバリエーションには、<TD>要素と同等のコンテンツモデルがあると確信しています。

関連する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

いいえ。必ずしもそうではありません。

TD内にDIVを配置する必要がある場合は、TDを適切に使用していることを確認してください。表形式のデータやセマンティクスを気にしない場合、最終的にはTDのDIVを気にしません。しかし、問題はないと思います-もしhaveしてやれば大丈夫です。

HTML仕様に従って

<div>は、flow contentが予想される場所に配置できます1、これは<td>コンテンツモデルです2。

37
Sampson

テーブルセルにはブロックレベルの要素を合法的に含めることができるため、本質的に偽物ではありません。もちろん、ブラウザ実装は、これを投機的で理論的な立場のままにします。レイアウトの問題やバグを引き起こす可能性があります。

テーブルはレイアウトに使用されていましたが、それでも使用されている場合がありますが、ほとんどのブラウザはコンテンツを適切にレンダリングすると思います。 IEでも。

14
David Thomas

位置を使用する場合：絶対; divでposition: relative;をtdで使用すると、問題が発生します。 FF、サファリ、およびchrome（Macではなく、Mac）はdivをtdに相対的に配置しません（予想どおり）。これはdisplay: table-whatever;のdivにも当てはまります。これを行うには、コンテナwidth: 100%;height: 100%;用の2つのdivが必要で、視覚的な影響なしにtdを埋めるために境界線がありません。そして絶対的なもの。

それ以外はなぜセルを分割しないのですか？

13
zeel

<div>を<td>内に配置することで問題に直面しました。

Td内に配置すると、document.getElementById()を使用してdivを識別できませんでした。しかし、外では、うまく機能していました。

2
Himaja

誰もが言ったように、レイアウトの目的にはお勧めできません。私は同じ疑問に思っていて、それが有効なコードであるかどうかだけを知りたいので、この質問に到着しました。

有効であるため、他の目的に使用できます。たとえば、私が使用するのは、テーブル行内にいくつかの派手な「CSSed」divを配置し、クイックjQuery関数を使用して、ユーザーが情報を価格、名前などでソートできるようにすることです。レイアウトテーブルのみが「垂直の順序」を提供しますが、CSSによってdivの幅、高さ、背景などを制御します。

1
Juan Ignacio

それに対処する2つの方法

  1. divタグ内にtbodyを配置
  2. divタグ内にtrを配置

Feferenceが表示される場合、両方のアプローチが有効です： https://stackoverflow.com/a/23440419/230524

0
Alan Dong