如何使用<div>标签和Css创build表格
我只想使用<div>标签和CSS来创build表格。
这是我的示例表。
<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及以下的版本。请给我你的解决scheme和想法。 谢谢。
.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; }
Runnable片段：
.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>
div不应该用于表格数据。 这与使用表格进行布局一样错误。
使用一个<table> 。 它容易，语义上正确，你将在5分钟内完成。
如果<table>有任何东西你不喜欢，也许你可以使用重置文件 ？
要么
如果你需要这个页面的布局，请查看cssplay布局示例来devise没有表格的网站。
使用正确的文档types; 它会解决问题。 将下面的行添加到HTML文件的顶部：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
这是一个古老的线索，但我想我应该发布我的解决scheme。 我最近遇到了同样的问题，我解决这个问题的方法是遵循下面介绍的三步法 ， 这个过程非常简单，没有任何复杂的CSS 。
（注意：当然，对于现代浏览器来说，使用table或table-row或table-cell的值来显示CSS属性可以解决这个问题，但是我使用的方法在现代和旧版浏览器中都可以工作，使用这些值来显示CSS属性。）
三步简单的方法
对于只有div的表，所以像表格元素一样获取单元格和行，请使用以下方法。
- 用一个块divreplace表格元素（使用
.table类） - 将每个tr或th元素replace为一个块div（使用
.row类） - 用一个内联块divreplace每个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>
有点OFF-TOPIC，但可能帮助某人更干净的HTML … CSS
.common_table{ display:table; border-collapse:collapse; border:1px solid grey; } .common_table DIV{ display:table-row; border:1px solid grey; } .common_table DIV DIV{ display:table-cell; }
HTML
<DIV class="common_table"> <DIV><DIV>this is a cell</DIV></DIV> <DIV><DIV>this is a cell</DIV></DIV> </DIV>
适用于Chrome和Firefox
在构build一组自定义的布局标签时，我发现了另一个这个问题的答案。 这里提供的是自定义标签集及其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。 边界也会做同样的事情，但在行中创build一条线。 填充不。 而且，虽然我没有尝试过，但我认为Margin的行为与Padding的方式相同，强制和空单元格被正确渲染。
