当溢出表放在另一个表中时溢出-x 不起作用答案

【问题标题】：overflow-x is not working when the overflowing table is placed inside another table当溢出表放在另一个表中时溢出-x 不起作用
【发布时间】：2020-01-26 03:45:22
【问题描述】：

<html>
    <body>
        <table width="100%" >
        <tbody>
            <tr>
                <td>
                    <div width=100% style="overflow-x: scroll; overflow-y: scroll;" >
                        <table>
                            <tr>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>

我将上面的代码与“apple”嵌套在另一个表中。当内容溢出时，我期待一个水平滚动条。但是我在表格下方有一个无法滚动的滚动条。相反，我得到了整个页面的滚动条。

【问题讨论】：

标签： html css

【解决方案1】：

首先，div 没有width 属性。

其次，你要指定width，100%是什么？现在还不得而知。给这个div 或它的某个父级指定一个特定的width。

看看我的 sn-p。

<html>
    <body>
        <table width="100%" >
        <tbody>
            <tr>
                <td>
                    <div style="overflow-x: scroll; overflow-y: scroll;width: 444px;" >
                        <table>
                            <tr>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                                <th> appleappleappleappleapple </th>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>

【讨论】：

感谢您的回答。无论如何我可以在不将宽度设置为某个特定像素值的情况下发生溢出吗？因为该表中的内容和屏幕大小各不相同。
@VikasNS 您必须指定宽度，因为浏览器必须知道内容何时开始溢出。您可以查看 vw 单位（等于视口初始包含块宽度的 1%。）developer.mozilla.org/en-US/docs/Web/CSS/length