<div>の内部はノーノーだったとどこかで聞いた/読んだようです<td>。動作しないというわけではありませんが、ディスプレイの種類に基づいて実際に互換性がないということです。私の勘を裏付ける証拠が見つからないので、完全に間違っている可能性があります。
9 に答える
divinstide aを使用するtdことは、テーブルをレイアウトに使用する他の方法よりも悪くありません。(ただし、レイアウトにテーブルをまったく使用しない人もいますが、私もその 1 人です。)
divただし、 aで aを使用するtdと、要素のサイズがどのようになるかを予測するのが難しい場合があります。div のデフォルトは、その親から幅を決定することであり、テーブル セルのデフォルトは、コンテンツのサイズに応じてサイズを決定することです。
のサイズ設定方法のルールdivは標準で明確に定義されていますが、 のサイズ設定方法のルールは明確に定義されてtdいないため、ブラウザによって使用するアルゴリズムがわずかに異なります。
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">
テーブルセルには合法的にブロックレベルの要素を含めることができるため、本質的に偽物ではありません。もちろん、ブラウザの強制は、これを投機的で理論的な立場に置きます。レイアウトの問題やバグを引き起こす可能性があります。
テーブルはレイアウトに使用されていたので(場合によってはまだ使用されていますが)、ほとんどのブラウザーはコンテンツを適切にレンダリングすると思います。IEですら。
position: absolute; を使用する場合 div でposition: relative;td を使用すると、問題が発生します。FF、safari、および chrome (mac、ただし PC ではありません) は div を td に対して相対的に配置しません (予想どおり)。これは div にも当てはまりdisplay: table-whatever;ます。コンテナwidth: 100%; height: 100%;で境界線がないため、視覚的な影響なしに td を埋めます。そして絶対的なもの。
それ以外は、なぜセルを分割しないのですか?
<div>内部に配置することで問題に直面しました<td>。
document.getElementById()td 内に配置すると、div を識別できませんでした。しかし、外では問題なく動作していました。
誰もが言ったように、レイアウトの目的では良い考えではないかもしれません. 同じことを考えていて、それが有効なコードかどうかだけ知りたかったので、この質問にたどり着きました。
有効なので他の用途にも使えます。たとえば、私がこれを使用する目的は、テーブルの行内にいくつかの派手な "CSSed" div を配置し、クイック jQuery 関数を使用して、ユーザーが価格、名前などで情報を並べ替えられるようにすることです。このように、レイアウトテーブルだけが「垂直順序」を提供しますが、CSS によって div の幅、高さ、背景などを制御します。
それはセマンティクスを破ります、それだけです。正常に動作しますが、「セマンティクスを破る」とHTMLの処理を楽しむことができないスクリーンリーダーなどが存在する可能性があります。