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

Question

どこかで聞いたか読んだような気がします <div> の内側 <td> ダメだった。動作しないというわけではなく、ディスプレイの種類に基づいて実際には互換性がないというだけです。私の予感を裏付ける証拠は見つからないので、完全に間違っている可能性があります。

Answer 1

div instide tdを使用すると、レイアウトのテーブルを使用して、任意の他の方法よりも悪くはありません。 （一部の人々はいえ、レイアウトのためにテーブルを使用することはありません、と私はそれらの一つであることが起こる。）

あなたはdivでtdを使用する場合は、

あなたはしかし、要素が大きさになりますどのように予測することは難しいかもしれない状況になります。 DIVのデフォルトは、その親からその幅を決定するものであり、表のセルのデフォルトは、そのコンテンツのサイズに応じてその大きさを決定することである。

divが大きすべきかについての規則は当規格で定義されているが、tdが大きすべきかに関する規則も定義されていないので、異なるブラウザはわずかに異なるアルゴリズムを使用する。

Answer 2

私は -elementことを発見する XHTML DTDをチェックした後また、

-elements見出し、リストなどのブロック要素を含むように許可されています。このように、内部の

-elementを使用して、 -element XHTML標準に違反しません。私は、HTMLの他の近代的な変動は、 -elementのための同等の内容モデルを持っていることをかなり確信しています。

ここでは、関連する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">

いいえ。必ずしも。

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

HTML仕様によると

あ <div> どこにでも置くことができます フローコンテンツ 期待されています¹, 、それは <td> コンテンツモデル².

それはありませんので、

テーブルのセルは、合法的に、本質的に、のど-PASをブロックレベル要素を含むことができます。ブラウザimplentationは、当然のことながら、この投機理論的な位置のまま。これは、レイアウトの問題やバグが発生することがあります。

のテーブルをレイアウトのために使用されたとしてけれども - そして時々はまだ私は、ほとんどのブラウザが適切にコンテンツをレンダリングすることを想像しare-。でもIEます。

あなたがポジションを使用する場合：絶対; TD上position: relative;とのdivに、あなたは問題に実行されます。あなたがしたいので、もしFF、サファリ、クロム（ただし、MAC、ないPC）は、次の2つのdiv、のための1つを必要とすること、これがまたdisplay: table-whatever;とdivのために真である（あなたが期待するように）、TDにDIVを位置決めません。容器width: 100%;のheight: 100%;なし境界ので、任意の視覚的な影響を与えることなくTDを満たします。その後、絶対1。

それ以外の理由は、単にセルを分割しない？

私は<div>内<td>を置くことによって、問題に直面している。

私はその内部にTDを配置する場合document.getElementById()を使用してdiv要素を識別することができませんでした。しかし、外、それが正常に働いていた。

誰もが言及したように、

は、レイアウトの目的のためには良い考えではないかもしれません。私は同じことを思っていたので、私はこの質問に到着し、私はそれが有効なコードになるかどうかを知りたいと思っています。

それは有効なので、

、あなたは他の目的のためにそれを使用することができます。例えば、私はそれを使用するつもりだと、いくつかの空想「CSSed」のdivに内部テーブルの行を配置し、その他の価格、名前、によって、ユーザが情報をソートできるようにするには、この方法を迅速jQueryの機能を使用することです、唯一のレイアウトテーブルには、「縦順」であるが、私はCSSで幅、高さ、背景などのdivのを制御します。

私を与えるだろう

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

1. 置く div 内部 tbody 鬼ごっこ
2. 置く div 内部 tr 鬼ごっこ

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

これは、それがすべてだ、セマンティクスを破ります。それが正常に動作していますが、「セマンティクスを破る」場合は、あなたのHTMLを処理して楽しむことはありません道をスクリーンリーダーか何かがあるかもしれません。

Answer 3

いいえ。必ずしも。

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

HTML仕様によると

あ <div> どこにでも置くことができます フローコンテンツ 期待されています¹, 、それは <td> コンテンツモデル².

Answer 4

それはありませんので、

テーブルのセルは、合法的に、本質的に、のど-PASをブロックレベル要素を含むことができます。ブラウザimplentationは、当然のことながら、この投機理論的な位置のまま。これは、レイアウトの問題やバグが発生することがあります。

のテーブルをレイアウトのために使用されたとしてけれども - そして時々はまだ私は、ほとんどのブラウザが適切にコンテンツをレンダリングすることを想像しare-。でもIEます。

Answer 5

あなたがポジションを使用する場合：絶対; TD上position: relative;とのdivに、あなたは問題に実行されます。あなたがしたいので、もしFF、サファリ、クロム（ただし、MAC、ないPC）は、次の2つのdiv、のための1つを必要とすること、これがまたdisplay: table-whatever;とdivのために真である（あなたが期待するように）、TDにDIVを位置決めません。容器width: 100%;のheight: 100%;なし境界ので、任意の視覚的な影響を与えることなくTDを満たします。その後、絶対1。

それ以外の理由は、単にセルを分割しない？

Answer 6

私は<div>内<td>を置くことによって、問題に直面している。

私はその内部にTDを配置する場合document.getElementById()を使用してdiv要素を識別することができませんでした。しかし、外、それが正常に働いていた。

Answer 7

誰もが言及したように、

は、レイアウトの目的のためには良い考えではないかもしれません。私は同じことを思っていたので、私はこの質問に到着し、私はそれが有効なコードになるかどうかを知りたいと思っています。

それは有効なので、

、あなたは他の目的のためにそれを使用することができます。例えば、私はそれを使用するつもりだと、いくつかの空想「CSSed」のdivに内部テーブルの行を配置し、その他の価格、名前、によって、ユーザが情報をソートできるようにするには、この方法を迅速jQueryの機能を使用することです、唯一のレイアウトテーブルには、「縦順」であるが、私はCSSで幅、高さ、背景などのdivのを制御します。

私を与えるだろう

Answer 8

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

1. 置く div 内部 tbody 鬼ごっこ
2. 置く div 内部 tr 鬼ごっこ

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

Answer 9

これは、それがすべてだ、セマンティクスを破ります。それが正常に動作していますが、「セマンティクスを破る」場合は、あなたのHTMLを処理して楽しむことはありません道をスクリーンリーダーか何かがあるかもしれません。