如何仅使用<div>标记和Css创建表
如何仅使用<div>标记和Css创建表
提问于 2010-06-16 20:30:19
我想创建表格只使用<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和下面的version.Please给我你的解决方案和想法。谢谢。
回答 9
Stack Overflow用户
发布于 2011-07-12 19:36:22
.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>
Stack Overflow用户
发布于 2010-06-16 20:32:34
div%s不应用于表格数据。这和使用表格进行布局一样是错误的。
使用<table>。它简单，语义正确，你可以在5分钟内完成。
Stack Overflow用户
发布于 2010-06-16 20:39:33
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3053205
复制相关文章
相似问题