如何创建表只使用<div>标签和Css

我想创建表只使用<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文件的顶部添加以下代码行:

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

2012-03-14 06:14:25

其他回答

div不应该用于表格数据。这和使用表格进行布局一样是错误的。使用<表>。这很简单，语义正确，你将在5分钟内完成。

2010-06-16 12:32:33

.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;  
}

可运行的代码片段:

.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>

2011-07-12 11:36:22

考虑到Grid-Css，我没有看到任何答案。我认为这是一种非常优雅的方法:grid-css甚至支持行跨度和列跨度。在这里你可以找到一篇非常好的文章:

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

2018-10-17 04:50:21

使用正确的文档类型;这将解决问题。在HTML文件的顶部添加以下代码行:

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

2012-03-14 06:14:25

这是一个旧的帖子，但我认为我应该发布我的解决方案。我最近遇到了同样的问题，我解决它的方法是遵循下面概述的三步方法，非常简单，没有任何复杂的CSS。

(注意:当然，对于现代浏览器，使用table或table-row或table-cell的值来显示CSS属性将解决这个问题。但是我使用的方法在现代和旧的浏览器中都同样有效，因为它不使用这些值来显示CSS属性。)

三步简单法

对于只带有div的表格，您可以像在表格元素中一样获得单元格和行，请使用以下方法。

用块div替换表格元素(使用.table类) 将每个tr或th元素替换为块div(使用.row类) 用内联块div替换每个td元素(使用.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在评论中提到的那样，为了避免在列的所有单元格上保持相同宽度的影响，可以采用下面两种方法中的任何一种。

指定单元格类的宽度细胞{显示:inline-block;宽度:340 px;} 使用现代浏览器的CSS如下。 .table{显示:表;} .row{显示:table-row;} .cell{显示:表格单元;}

2016-06-03 17:43:27

如何创建表只使用<div>标签和Css

推荐文章

最新文章

标签