11

皆さん、私はプログラマーですが、目に見えるテーブルのように見えるものを追加し、html テーブルを使用する必要があるときは、いつも仲間の Web デザイナーに叩かれます。div の一般的な html div 構造を構築して、テーブルのようなものが必要なときにいつでも html をコピーして貼り付けることができるようにするにはどうすればよいですか?

したがって、このテーブルのhtml構造の場合

<table>
 <tr><td></td><td></td></tr>
 <tr><td></td><td></td></tr>
 <tr><td></td><td></td></tr>
</table>

同様のdiv構造は何ですか?

4

4 に答える 4

16

ディスプレイtable、table-row、およびを使用する必要がありtable-cellます。

CSS:

.table
{
   display:table;
}

.table-row
{
   display:table-row;
}

.table-cell
{
   display:table-cell;
}

HTML:

<div class="table">
   <div class="table-row">
      <div class="table-cell">1</div>
      <div class="table-cell">2</div>
   </div>
   <div class="table-row">
      <div class="table-cell">3</div>
      <div class="table-cell">4</div>
   </div>
</div>

デモ

table、table-row、およびtable-celldisplay の値は IE7 以下ではサポートされておらず、IE8 には !DOCTYPE が必要であることに注意してください。

また、テーブルは、クラスを含む div の束よりもマークアップにより意味的な意味を与えるため、表形式のデータを表すために使用する必要があります。レイアウト目的でテーブルを使用しないでください。

于 2012-08-13T11:01:16.307 に答える
8

表形式のデータにHTMLtable要素を使用している場合は、仲間の Web デザイナーを叩きのめすことをお勧めします。

HTML テーブルは悪ではありませんtable。表形式のデータを表示するときに HTML を使用することは許容され、推奨されます。

http://webdesign.about.com/od/tables/a/aa122605.htm

于 2012-08-13T11:05:34.213 に答える
4

簡単にするためにインライン スタイルを使用しますが、実際のプロジェクトではお勧めしません。

<div style="overflow: hidden">
    <div style="width: 50%; float: left"></div>
    <div style="width: 50%; float: right"></div>
    <div style="width: 50%; clear: both; float: left"></div>
    <div style="width: 50%; float: right"></div>
</div>

これは多くの解決策の 1 つです。

このoverflow: hiddenビットは、コンテナーの div を「自己クリア」するために使用されます (これがないと、div はそのフローティングされた子をラップしません)。3 番目の div が両方をクリアする理由は、それが独自の行にレンダリングされるようにするためです。

編集: div は幅が 50% であるため、他のすべての div を右にフロートする必要はありません (それらをすべて左にフロートさせると、同じように見えます)。ただし、div 間のマージンが必要な場合は、幅を変更するだけです。他のすべての div は引き続き右に配置されます (すべてが左にフロートされている場合はそうではありません)。

編集：実際に表形式のデータをマークアップしている場合（一部のコメントが示唆しているように）、必ずテーブル要素を使用してください。それが目的です。から、同じ名前のクラスを持つ s に切り替えるだけでは絶対にいけません。tabletrtddiv

于 2012-08-13T11:00:29.087 に答える
1

powerbuoy が提案したようなレイアウトを使用することをお勧めしますが、さまざまなシナリオで構造をさまざまなサイズに合わせたいので、css でグリッド システムを使用してデザイン レイアウトを一元化することをお勧めします。

.left { float:left; }
.right { float: right }
.onetenth { width: 10%; }
.onetwentieth { width: 5%; }

等々...

このアプローチにより、スタイリングが大幅に削減され、パフォーマンスが向上することをお約束します。

参照: https://github.com/stubbornella/oocss/wiki/ (オブジェクト指向 CSS)

于 2012-08-13T11:07:05.197 に答える