首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

用div兑现表格

2012-08-31 
用div实现表格style.tableCenterBodyDiv{position: relativeoverflow-y:autooverflow-x:scroll}.data

用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一样,出现横向滚动条

热点排行