如何使用<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及以下版本。请给我你的解决方案和想法。谢谢。
3 回答
心有法竹
TA贡献1866条经验 获得超5个赞
这是一个老线程，但我想我应该发布我的解决方案。我最近遇到了同样的问题，我解决它的方法是遵循下面概述的三步法，这很简单，没有任何复杂的CSS。
（注意：当然，对于现代浏览器，使用table或table-row或table-cell的值来显示CSS属性可以解决问题。但是我使用的方法在现代和旧版浏览器中同样有效，因为它没有使用这些值来显示CSS属性。）
三步简单方法
对于仅包含div的表，以便像在表元素中一样获取单元格和行，请使用以下方法。
用块div替换表元素（使用
.table类）用块div替换每个tr或th元素（使用
.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>
- 3 回答
- 0 关注
- 461 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消