HTML_CSS 胡乱总结

<div> 如何对<Table>超出的部分进行OverFlow处理 -->针对 FireFox 2.0 and 3.0.

最近在网页上做一个类似于Excel的表格，想法简单，用两个Table,一个Table做Column Name, 另外一个Table 保存所有值。一个<div> 设置 相对定位为relative，包裹第一个Table。 另外一个<div>设置为相对定位absolute，并且设置overflow-x:hidden, overflow-y:auto。包裹第二个Table。这样，一个类似于Excel的表格就形成了，也可以确保拖动的时候，Column Name不移动.

但现在问题出在FireFox 2.0和FireFox 3.0上，当<div>包裹二个Table的时候, 如果Table超出了<div>的长度，Table自动的被压缩，以适应<div>的长度，第一个<div>没有滚动条，而第二个<div>有滚动条，那么第二个Table的长度就不等于第一个Table的长度，所以导致Column Name和对以的值所在的Column的长度不对应，就很难看.

问题的疑点:我对Table设定的长度是用百分比设定的. 100%

被第一个<div>嵌套的第二个 <div> 的长度设定 为 stype="width:100%" (此项在FireFox 3.0上必须设置,否则会用 <div> 默认的一个很短的长度进行显示）

解决问题:

百分比定义的长度为相对长度，改成绝对长度 1000，问题解决.

Table如果超出<div>的长度后，不会自动进行压缩而去适应<div>的长度，而是被<div>隐藏掉.

效果如图所示：