我想创建表只使用<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及以下版本。请给我你的解决方案和想法。
谢谢。
在构建一组自定义布局标记时，我找到了这个问题的另一个答案。这里提供了自定义标签集及其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。Border也会做同样的事情，但会在行中创建一行。填充不。而且，虽然我还没有尝试过，我认为保证金将以同样的方式填充，在强制和空单元格被正确渲染。
这是一个旧的帖子，但我认为我应该发布我的解决方案。我最近遇到了同样的问题，我解决它的方法是遵循下面概述的三步方法，非常简单，没有任何复杂的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{显示:表格单元;}
