我想创建表只使用<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/
你可以创建“新标签”基于经典的表格，一个“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类。
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也会做同样的事情，但会在行中创建一行。填充不。而且，虽然我还没有尝试过，我认为保证金将以同样的方式填充，在强制和空单元格被正确渲染。
