日期:2014-05-17  浏览次数:20584 次

用div实现表格
<style>
.tableCenterBodyDiv{
position: relative;
overflow-y:auto;
overflow-x:scroll; 
}

.dataWindow {
font: 12px "宋体", Verdana;
table-layout: fixed;
border-collapse: collapse;
overflow:auto;
}

</style>
<div style="WIDTH: 500px; HEIGHT: 270px" class=tableCenterBodyDiv>
<div id='xx' style="width:100%;border:1px solid red;overflow:auto;">
<div style="float:left;width:130px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:130px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:130px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:130px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:130px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div>
</div>


<DIV style="WIDTH: 500px; HEIGHT: 270px" class=tableCenterBodyDiv>
 
<table id=resultset class=dataWindow tabIndex=null tableMark="datawindow_0f0204fa_b609_49a2_b472_dee6bf6d5b1f" >
<tr >
<td style=" width:130px;height:80px;border:1px solid blue;">TEST DIV</td>
<td style=" width:130px;height:80px;border:1px solid blue;">TEST DIV</td>
<td style=" width:130px;height:80px;border:1px solid blue;">TEST DIV</td>
<td style=" width:130px;height:80px;border:1px solid blue;">TEST DIV</td>
<td style=" width:130px;height:80px;border:1px solid blue;">TEST DIV</td>
</tr>
</table>

</div>



我想用div实现和下面table实现的效果(仅需考虑ie下)!
附:下面那个table在ff和chrome效果跟ie不一样,怎么才能到达和ie下一样的效果

------解决方案--------------------
调整了半天,一样不了。table-layout: fixed; 这句是定义什么的?

------解决方案--------------------
div 的WIDTH: 500px,一共五个div,每个应该是100才对,你设130的话就换行啦。

另外,div的大小不包括border,如果你设border为1px,5个小的div的width还要设小一些才好,去掉左右border也就是98px。

div部分你可以这样修改
<div style="WIDTH: 500px; HEIGHT: 270px" class="tableCenterBodyDiv">
<div style="float:left;width:98px;height:80px;border:1px solid blue;border-right:none;">TEST DIV</div>
<div style="float:left;width:98px;height:80px;border:1px solid blue;border-right:none;">TEST DIV</div>
<div style="float:left;width:98px;height:80px;border:1px solid blue;border-right:none;">TEST DIV</div>
<div style="float:left;width:98px;height:80px;border:1px solid blue;border-right:none;">TEST DIV</div>
<div style="float:left;width:98px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

这样就和下面的table很相近啦。
------解决方案--------------------
哦,我理解错了,呵呵。
这样不太好实现诶
探讨
我希望的是内部的div会把外面的div撑开 ,就跟下面的table一样,出现横向滚动条