代码结构:在div中放一个表格,div设置overflow:auto,table的宽度为100%。最好在这个div前放一个兄弟浮动的div,这样效果更明显。

问题现象:

当表格的内容比div的高度还要高时,div会出现竖直滚动条,同时在IE6和IE7下会出现问题:此时table的100%宽度还是没有滚动条那是的宽度,出现滚动条后,div的可视宽度减少,导致横向滚动条也出现了,而且横向能滚动的长度正好是滚动条的宽度。单在IE8下就不会出现这样情况。

问题代码:

<div style="float:left; height:200px; background-color:#060; width:100px;">f</div>
<div style=" overflow:auto;">
<table border="1" style="table-layout:fixed;width:100%;">
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
.........
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>
</div>

解决方法:内嵌套一个分区元素 Layout

<div style="float:left; height:200px; background-color:#060; width:100px;">f</div>
<div style=" overflow:auto;">
<div style="+zoom:1;">
<table border="1" style="table-layout:fixed;width:100%;">
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
.........
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>
</div>
</div>

相关文章:

  • 2021-10-19
  • 2022-12-23
  • 2021-08-12
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-06
相关资源
相似解决方案