<div>タグとCssのみを使用してテーブルを作成する方法

182

<div>タグとCSS だけを使用してテーブルを作成したい。

これは私のサンプルテーブルです。

<body>
  <form id="form1">
      <div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Customer ID</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                  <div class="divCell">001</div>
                <div class="divCell">002</div>
                <div class="divCell">003</div>
            </div>
            <div class="divRow">
                <div class="divCell">xxx</div>
                <div class="divCell">yyy</div>
                <div class="divCell">www</div>
           </div>
            <div class="divRow">
                <div class="divCell">ttt</div>
                <div class="divCell">uuu</div>
                <div class="divCell">Mkkk</div>
           </div>

      </div>
  </form>
</body>

そしてスタイル：

<style type="text/css">
    .divTable
    {
        display:  table;
        width:auto;
        background-color:#eee;
        border:1px solid  #666666;
        border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }

    .divRow
    {
       display:table-row;
       width:auto;
    }

    .divCell
    {
        float:left;/*fix for  buggy browsers*/
        display:table-column;
        width:200px;
        background-color:#ccc;
    }
</style>

ただし、この表はIE7以前のバージョンでは機能しません。解決策とアイデアを教えてください。ありがとう。

html css

— くまら
ソース

見て取るこの記事を

— tanathos

32

なぜdivテーブルを作成するのに使いたいのですか？

— フイ

3

「CSSテーブルはHTMLテーブルよりも優れているか？」という良い記事を参照してください。【vanseodesign.com/css/tables/]

— ウラジミール

5

誰かが通常のテーブルの代わりにdivベースのテーブルを使用する理由は、..... divベースのテーブルでのレンダリング/アニメーション/リフローが、通常のテーブルをレンダリングするよりも実際に高速（特にDOMサイズが大きい場合）だと思います。 .....これを参照してください.... stubbornella.org/content/2009/03/27/...この.... developer.nokia.com/community/wiki/... slickgridのようなすべてのデータ集約型のJavaScriptプラグインそれ以上をetc divBasedtableを使用

— bhavya_w

1

ので、おそらく@huy divsがもっとあるフレックステーブルよりもできます！

— Kai

262

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

Runnableスニペット：

コードスニペットを表示

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

<body>
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Customer ID</div>
                <div  class="div-table-col">Customer Name</div>
                <div  class="div-table-col">Customer Address</div>
             </div>
            <div class="div-table-row">
                  <div class="div-table-col">001</div>
                <div class="div-table-col">002</div>
                <div class="div-table-col">003</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">xxx</div>
                <div class="div-table-col">yyy</div>
                <div class="div-table-col">www</div>
           </div>
            <div class="div-table-row">
                <div class="div-table-col">ttt</div>
                <div class="div-table-col">uuu</div>
                <div class="div-table-col">Mkkk</div>
           </div>

      </div>
  </form>
</body>

スニペットを展開

— 小村シバ
ソース

224

ありがとうございました！実際に彼の質問に答えた人で、「それはばかげた考えだ」とだけ言うのではない。人々が質問に答えないとき、私はそれが嫌いです...彼がそれを尋ねた場合、それは答えられるべきです

— ブライアン・リーシュマン

23

@stumpx：時々正しい答えは「それをしないでください」です。これはその時代の1つです。「divとCSSを使用してテーブルを作成するにはどうすればよいですか」と質問する必要がある場合、2つの問題の1つがあります。

— cHao

28

@cHaoそれが答えであると思われる場合は、それを無視して、実際に質問に答えたい人に答えさせてください。

— ブライアンリーシュマン

14

@stumpx：質問に答えるべきではないと思う場合は、投票して投票を終了します-質問が存在するべきではないためです。有効な質問はすべて回答に値します。しかし、私が言ったように、時々最も正しい答えは「それをしないでください」です。間違った問題を解決する方法を誰かにアドバイスするのは良いことですか？他の人がそのようなアドバイスを提供している間、待機するのは良いことですか？私はノーと言う。

— cHao

5

デザイナーの頭に何があるかわからない場合、上記のようにdiv構造にデータを残す方が、テーブルに残すよりもはるかに優れています。より良いということは、フローティングdivからテーブルへの変換がより簡単になることを意味します。

— anatoly techtonik 2013年

96

div表形式のデータには使用しないでください。これは、レイアウトにテーブルを使用するのと同じくらい間違っています。
を使用し<table>ます。簡単で、意味的に正しく、5分で完了します。

— コビ
ソース

8

ただし、アプリケーションによって異なります。表形式で表示されるものは、分割されていても線形であることがあります。たとえば、カレンダーはテーブルではなくdivとしてメリットがあります

— Dan

2

@ダン：リストのようなメリットがあるかもしれませんが、divの束はレイアウトテーブルと同じくらい意味がありません。

— cHao

4

テーブルがDIVと調和するように要求するいくつかの理由があります。その1つは、SharePoint 2007でテーブルタグを使用し、ページに存在するすべてのコンテンツを台無しにしています

— Shiva Komuravelly

2

@simplyletgo：意味的には、divをテーブルのように動作させるよりも、テーブルのセルをブロックとしてスタイル設定する方が適切です。

— cHao 2013

1

何故なの？テーブルを使用する場合、特定のセルの周りにスクロールバーを追加して、たとえば、テーブルにExcelのようなロックされたヘッダーを追加することはできません。テーブルには多くの制限がありますが、なぜこれをdivで実行できないのですか？

— pilavdzice 2013年

9

これは古いスレッドですが、自分の解決策を投稿する必要があると思いました。私は最近同じ問題に直面し、それを解決する方法は、以下に概説する3ステップのアプローチに従うことです。これは、複雑なCSSなしで非常に簡単です。

（注：もちろん、最新のブラウザでは、CSS属性の表示にtable、table-row、またはtable-cellの値を使用すると問題が解決します。しかし、私が使用したアプローチは、最新のブラウザでも古いブラウザでも同じように機能します。これらの値を表示CSS属性に使用します。）

3ステップのシンプルなアプローチ

divのみのテーブルの場合、テーブル要素と同じようにセルと行を取得するには、次の方法を使用します。

テーブル要素をブロックdivに置き換える（.tableクラスを使用）
各trまたはth要素をブロックdivに置き換えます（.rowクラスを使用）
各td要素をインラインブロックdivに置き換えます（.cellクラスを使用）

.table {display:block; }
.row { display:block;}
.cell {display:inline-block;}

    <h2>Table below using table element</h2>
    <table cellspacing="0" >
       <tr>
          <td>Mike</td>
          <td>36 years</td>
          <td>Architect</td>
       </tr>
       <tr>
          <td>Sunil</td>
          <td>45 years</td>
          <td>Vice President aas</td>
       </tr>
       <tr>
          <td>Jason</td>
          <td>27 years</td>
          <td>Junior Developer</td>
       </tr>
    </table>
    <h2>Table below is using Divs only</h2>
    <div class="table">
       <div class="row">
          <div class="cell">
             Mike
          </div>
          <div class="cell">
             36 years
          </div>
          <div class="cell">
             Architect
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Sunil
          </div>
          <div class="cell">
             45 years
          </div>
          <div class="cell">
             Vice President
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Jason
          </div>
          <div class="cell">
             27 years
          </div>
          <div class="cell">
             Junior Developer
          </div>
       </div>
    </div>

スニペットを展開

アップデート1

thatslchコメントで言及されているように、列のすべてのセルで同じ幅が維持されないという影響を回避するには、以下の2つの方法のいずれかを採用できます。

cellクラスの幅を指定

セル{display：inline-block; 幅：340px;}
以下の最新のブラウザのCSSを使用します。

.table {display：table; } .row {display：table-row;} .cell {display：table-cell;}

— スニル
ソース

1

列は同じサイズではないので、これはそれを行いません。

— thatsIch 2017年

幅については、表の要素のように動作しないのは当然です。ただし、.cell {width：300px;}のようなCSSで.cellクラスの幅を指定すると、同様の効果が得られます。ただし、セルのCSSクラスの幅を定義しない限り、divを使用するときは、前述の制限が常に存在します。同じ効果を得る別の方法は、次のクラスを使用することです。<style> .table {display：table; } .row {display：table-row;} .cell {display：table-cell;} </ style>上記の回答で述べたクラスを使用する代わりに。

— 2017年

@thatsIch、あなたが言及した幅の問題の回避策を説明する私の回答にUPDATE 1を追加しました

— Sunil

4

<table>気に入らないものがあれば、リセットファイルを使用できますか？

または

ページのレイアウトにこれが必要な場合は、テーブルのないWebサイトを設計するためのcssplayレイアウトの例を確認してください。

— ウルスラ・カーゼレク
ソース

3

グリッドCssを考慮した答えはありません。私はそれが非常にエレガントなアプローチだと思います：grid-cssは行スパンと列スパンまでもサポートします。ここで非常に良い記事を見つけることができます：

https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611

— ザルド
ソース

2

正しいドキュメントタイプを使用してください。それは問題を解決します。以下の行をHTMLファイルの先頭に追加します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

— あいうえお
ソース

2

少しオフトピックですが、HTMLをきれいにするために誰かを助けるかもしれません... CSS

.common_table{
    display:table;
    border-collapse:collapse;
    border:1px solid grey;
    }
.common_table DIV{
    display:table-row;
    border:1px solid grey;
    }
.common_table DIV DIV{
    display:table-cell;
    }

HTML

<DIV class="common_table">
   <DIV><DIV>this is a cell</DIV></DIV>
   <DIV><DIV>this is a cell</DIV></DIV>
</DIV>

ChromeとFirefoxで動作します

— ハリス・クレテイニス
ソース

2

そして、あなたのテーブルセルが<div>それらに要素を持っているなら？あなたはおそらく望んでいます.common_table div > div

— vol7ron

2

レイアウトタグのカスタムセットを作成する際に、この問題に対する別の答えを見つけました。ここでは、カスタムタグとそのCSSクラスのセットが提供されています。

HTML

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

空のセルとセルを適切なサイズにするための重要なポイントは、Box-SizingとPaddingです。ボーダーも同じことを行いますが、行に線を作成します。パディングはしません。そして、まだ試していませんが、MarginはPaddingと同じように動作し、空のセルが適切にレンダリングされるように強制します。

— Eネットアーチ
ソース