如何使用<div>標簽和Css創(chuàng)建表我想只使用<div>標簽和CSS 創(chuàng)建表。這是我的樣本表。<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條經(jīng)驗 獲得超5個贊
這是一個老線程，但我想我應該發(fā)布我的解決方案。我最近遇到了同樣的問題，我解決它的方法是遵循下面概述的三步法，這很簡單，沒有任何復雜的CSS。
（注意：當然，對于現(xiàn)代瀏覽器，使用table或table-row或table-cell的值來顯示CSS屬性可以解決問題。但是我使用的方法在現(xiàn)代和舊版瀏覽器中同樣有效，因為它沒有使用這些值來顯示CSS屬性。）
三步簡單方法
對于僅包含div的表，以便像在表元素中一樣獲取單元格和行，請使用以下方法。
用塊div替換表元素（使用
.table類）用塊div替換每個tr或th元素（使用
.row類）用內聯(lián)塊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>
添加回答
舉報
0/150
提交
取消