我想创建表只使用<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及以下版本。请给我你的解决方案和想法。
谢谢。
你可以创建“新标签”基于经典的表格，一个“div表”:
<STYLE>
dtable {
display:table;
width:100%;
border:1px solid #000;
border-spacing:5px;
}
dtable dtr {
display:table-row;
clear: both;
}
dtable dtd {
display:table-column;
padding:5px;
}
</STYLE>
<DTABLE>
<DTR>
<DTD>row 1 col 1</DTD>
<DTD>row 1 col 2</DTD>
</DTR>
<DTR>
<DTD>row 2 col 1</DTD>
<DTD>row 2 col 2</DTD>
</DTR>
</DTABLE>
你可以为每个“dtd”使用特定的CSS选择器，比如:
dtable dtd:nth-child(1) {
width:300px;
font-weight:bold;
}
dtable dtd:nth-child(2) {
width:400px;
}
而“斑马”则像:
dtable dtr:nth-child(odd) {
background-color:#ddd;
}
更多信息，请参见:https://css-tricks.com/useful-nth-child-recipies/
这是一个旧的帖子，但我认为我应该发布我的解决方案。我最近遇到了同样的问题，我解决它的方法是遵循下面概述的三步方法，非常简单，没有任何复杂的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{显示:表格单元;}
你可以创建“新标签”基于经典的表格，一个“div表”:
<STYLE>
dtable {
display:table;
width:100%;
border:1px solid #000;
border-spacing:5px;
}
dtable dtr {
display:table-row;
clear: both;
}
dtable dtd {
display:table-column;
padding:5px;
}
</STYLE>
<DTABLE>
<DTR>
<DTD>row 1 col 1</DTD>
<DTD>row 1 col 2</DTD>
</DTR>
<DTR>
<DTD>row 2 col 1</DTD>
<DTD>row 2 col 2</DTD>
</DTR>
</DTABLE>
你可以为每个“dtd”使用特定的CSS选择器，比如:
dtable dtd:nth-child(1) {
width:300px;
font-weight:bold;
}
dtable dtd:nth-child(2) {
width:400px;
}
而“斑马”则像:
dtable dtr:nth-child(odd) {
background-color:#ddd;
}
更多信息，请参见:https://css-tricks.com/useful-nth-child-recipies/
