如何在嵌套表上使溢出CSS属性工作?

时间:2012-11-29 23:25:08

标签: css overflow

我发现了一个令人烦恼的情况:如果我有一个嵌套在div overflow: auto(或overflow: noneoverflow: scroll的div内的表),并且表的宽度超过了窗口的宽度,潜水将切断桌子并添加滚动条......应该如此。

但是,如果我采用完全相同的方案并将其扔到(另一个)表中,突然overflow属性不再受到尊重。

作为我的意思的一个例子,这是工作案例:

<div style="border: 1px solid green; overflow: hidden">
    <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
</div>

如果你在浏览器中看到它,你会在右边看到一个绿色边框,但不是红色边框,因为div正在隐藏表中的溢出,所以你看到的只是它的边框。

将其与完全相同的代码进行比较,包含在表格中:

<table><tr><td>
    <div style="border: 1px solid green; overflow: hidden">
        <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
    </div>
</td></tr></table>

你会看到没有右边框,因为两个元素都溢出页面;如果向右滚动得足够远,你会看到两个边界,因为div从不约束它的表。

我知道这可能发生了,因为TD计算它们的宽度与其他元素不同,因此TD内部的div不能正常溢出,因为它计算100%宽度“错误”(尽管每个说不是真的错误,只是在我想要的方面是错误的。

鉴于此,任何人都可以帮我弄清楚如何在“桌面内”案例中获得正确的溢出行为吗?

3 个答案:

答案 0 :(得分:1)

只需在外部表上使用make[5]: Nothing to be done for `install-data-am'. make[4]: Nothing to be done for `install-exec-am'. make[4]: Nothing to be done for `install-data-am'. make[3]: Nothing to be done for `install-exec-am'. make[3]: Nothing to be done for `install-data-am'. Making install in Main Making install in mpplib mpifort -I/Users/mada0007/Documents/softwares/RegCM-4.7.0/external -I/usr/local/include -I/usr/local/include -I/Users/mada0007/Documents/softwares/RegCM-4.7.0/Share -O3 -finline- functions -fconvert=big-endian -fno-range-check -fPIC -c mod_mppparam.F90 /Users/mada0007/anaconda3/envs/Research_ass/bin/mpifort: line 373: x86_64-apple-darwin13.4.0- gfortran: command not found make[2]: *** [mod_mppparam.o] Error 127 make[1]: *** [install-recursive] Error 1 make: *** [install-recursive] Error 1

table-layout: fixed;width: 100%

答案 1 :(得分:0)

用另一个div包装表。

<div style="overflow: hidden">
<table><tr><td>
    <div style="border: 1px solid green; overflow: hidden">
        <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
    </div>
</td></tr></table>
</div>

答案 2 :(得分:0)

遗憾的是,我不得不通过移除外部表来解决这个问题(这意味着必须完全修改布局)。我仍然喜欢听到是否有另一种方式......