如何使用<div>标签和Css创建表
如何使用<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及以下版本。请给我你的解决方案和想法。谢谢。
慕勒3428872浏览 462回答 3
3回答
-
心有法竹
这是一个老线程，但我想我应该发布我的解决方案。我最近遇到了同样的问题，我解决它的方法是遵循下面概述的三步法，这很简单，没有任何复杂的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>
随时随地看视频慕课网APP
Html/CSS