web-dev-qa-db-ja.com

CSSを使用してDIVをテーブルのように動作させる

さて、サイトの設計中に思いつきました。テーブルとして機能するのにより適しているサイトのいくつかの部分がありますが、表形式のデータではありません。何らかの理由で、テーブルではないものにテーブルを使用することは本当にバグです。そのため、CSSの表示オプションに注意しましたが、正しく機能させることはできません。これが私がやろうとしていることです。問題は何ですか？

<div class="table">
  <div class="tr">
    <div class="td">Row 1, Cell 1</div>
    <div class="td">Row 1, Cell 2</div>
    <div class="td">Row 1, Cell 3</div>
  </div>
  <div class="tr">
    <div class="td">Row 2, Cell 1</div>
    <div class="td">Row 2, Cell 2</div>
    <div class="td">Row 2, Cell 3</div>
  </div>
</div>

これがCSSの外観です。

div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }

ページがテーブルを使用しているように見せたいのですが、「セル」はすべて改行されています。何かご意見は？

htmlcsscss-tables
27
Yoshiyahu

奇妙な：あなたが引用したものはうまく見え、うまくいくはずです。オーバーライドdisplay: block !importantどこか？

しかし、私の意見として、私は神の愛のために、ただテーブルを使うと言うつもりです。 :)

真剣に。このような状況でテーブルを使用しない主な理由は、テーブルが意味的に正しい要素ではないということです。しかし、そのdiv-soupを見ると、<table>は、正確に表示している表形式のデータではない場合でも、より望ましい方法です。

21
Pekka 웃

これは古い投稿であることは知っていますが、DIVの問題を実際に修正した人はいないので、試してみようと思いました。

あなたの問題は単純です...あなたのセル要素はdivですので、表示です：ブロック、テーブルセルの代わりにスパンを使用してください（または.cell CSSにdisplay：inlineを追加してください）。

<div class="table">
  <div class="tr">
    <span class="td">Row 1, Cell 1</span>
    <span class="td">Row 1, Cell 2</span>
    <span class="td">Row 1, Cell 3</span>
  </div>
  <div class="tr">
    <span class="td">Row 2, Cell 1</span>
    <span class="td">Row 2, Cell 2</span>
    <span class="td">Row 2, Cell 3</span>
  </div>
</div>
10
Pastor Bones

おそらくブラウザの問題ですか？あなたのコードはChromeで動作します。こちらをご覧ください： http://jsfiddle.net/xVTkP/

何を使っていますか？

（しかし、真剣に、他の人が言ったように、テーブルを使用します）

5
Matt
<body>
    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">Row 1, Cell 1</div>
            <div style="display: table-cell;">Row 1, Cell 1</div>
            <div style="display: table-cell;">Row 1, Cell 1</div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;">Row 2, Cell 1</div>
            <div style="display: table-cell;">Row 2, Cell 1</div>
            <div style="display: table-cell;">Row 2, Cell 1</div>
        </div>
    </div>
</body>
4
amit jain

どのブラウザを使用していますか？これらの値 完全には実装されていません すべてのブラウザで。それでも、divs + CSSでテーブルをエミュレートしようとするポイントは何ですか？なぜテーブルを使用しないのですか？

HTML作成者は一般に、テーブルのoveruseによる初期の（過去10年のどこか？レイアウト要素。考えてみてください：ネストしたテーブルのネストしたテーブル、パディングのためだけの空のセルなどそれを乗り越えてくださいジョブを完了させる要素を使用します。

個人的には、table、table-row、table-cellなどはCSS display仕様から除外されているはずです。

3
Matt Ball