2012-12-28 5 views
7

テーブル:divs&cssを使用してテーブルをエミュレートするにはどうすればよいですか?このような

<table> 

    <tr> 
    <td> ... </td> 
    <td> ... </td> 
    <td> ... </td> 
    </tr> 

    <tr> 
    <td> ... </td> 
    <td> ... </td> 
    <td> ... </td> 
    </tr> 

    ... 
</table> 

にはどうすればいいのdivとcssのディスプレイを使用して作成することができます:表ルールを?

+10

それは表形式のデータなら、テーブルを使用しています。 – Kyle

+1

テーブルが必要なときにテーブルをエミュレートするポイントはありません。 –

+2

類似の投稿http://stackoverflow.com/questions/3053205/how-create-table-only-using-div-tag-and-css – Scorpio

答えて

20

これを試してみてください;)

CSS

.table { 
    display: table; 
    width: 500px; 
} 
.tr { 
    display: table-row; 
} 
.td { 
    display: table-cell; 
} 

HTML

<div class="table"> 
    <div class="tr"> 
     <div class="td">asdf</div> 
     <div class="td">asdf</div> 
     <div class="td">asdf</div> 
    </div> 
    <div class="tr"> 
     <div class="td">asdf</div> 
     <div class="td">asdf</div> 
     <div class="td">asdf</div> 
    </div> 
</div> 
関連する問題