html - 为什么这张 table 超出了窗口的宽度？

Question

我不知道该怎么做才能完成这项工作。我只想让最里面的 div 可滚动，但由于某种原因，宽度超出了窗口。

<table style='max-height: 100%; width: 100%; margin: 0; border: 0px none white; display: block;'>
    <tr style='border: 0px none white; width: 100%;'>
        <td style='border: 0px none white; width: 100%;'>
            <div style='overflow-y: scroll; overflow-x: hidden; width: 100%;'>
                <div style='padding-left: 5px; width: 100%;'>
                    <div style='overflow: auto; width: 100%; border-radius: 10px; border: 1px solid silver; background-color: transparent;'>
                        <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

here is a fiddle

Answer 1

删除 display:block从表中(否则你也可以使用 <div> )，然后添加
table-layout:fixed .这会强制表格达到您说的宽度，而不是将其视为“最小宽度”