html - 表格没有重叠但带有滚动条以显示单元格内容过大

Question

我想创建一个水平填充屏幕但不会变大的表格。在一个表格单元格中，我需要放置任意大小的内容，如果太大，则应使用水平滚动条显示。

我试过这个:

    <table style="table-layout:fixed; width:100%;">
    <tr><td>DONT OVERLAP ME</td><td width=100%>some other content</td></tr>
    <tr><td colspan=2>
        <div style="width:100%; overflow-x:auto;">
CONTENT_WITH_ARBITRARY_WIDTH_AND_HEIGHT_THE_TABLE_CELL_SHOULD_DISPLAY_HORIZONTAL_SCROLLBARS_BUT_SHOULD_GROW_VERTICALLY_NORMALLY
        </div>
    </td></tr>
    <tr><td>DONT OVERLAP ME</td><td width=100%>some other content</td></tr>
    </table>

这适用于滚动条，但由于“table-layout:fixed”，表格失去了根据可用空间和可显示内容调整表格大小的所有能力。我需要它，因为内容是完全动态的，我无法知道一列需要多少空间，但我知道哪些列应该贪婪地使用可用空间(因此是 100% 宽度的列)。

换句话说，它与上面示例中的“DONT OVERLAP ME”部分重叠。

所以我试试这个:

    <table style="table-layout:fixed; width:100%;">
    <tr><td>
    <table style="width:100%;">
    <tr><td>DONT OVERLAP ME</td><td width=100%>some other content</td></tr>
    <tr><td colspan=2>
        <div style="width:100%; overflow-x:auto;">
CONTENT_WITH_ARBITRARY_WIDTH_AND_HEIGHT_THE_TABLE_CELL_SHOULD_DISPLAY_HORIZONTAL_SCROLLBARS_BUT_SHOULD_GROW_VERTICALLY_NORMALLY
        </div>
    </td></tr>
    <tr><td>DONT OVERLAP ME</td><td width=100%>some other content</td></tr>
    </table>
    </td></tr>
    </table>

这里重叠是固定的，但出于某种原因，内表只是忽略了它在另一个表内并且超出了屏幕边缘并且从不显示滚动条。 (我怀疑这又是“table-layout:fixed”的症状)

有没有办法避免重叠并仍然有一个带有水平滚动条的表格单元格？

Answer 1

  <div style="max-width:100%; overflow-x:scroll;">

CONTENT_WITH_ARBITRARY_WIDTH_AND_HEIGHT_THE_TABLE_CELL_SHOULD_DISPLAY_HORIZONTAL_SCROLLBARS_BUT_SHOULD_GROW_VERTICALLY_NORMALLY

请注意，您的代码中有 width=100%，将其设为 max-width，然后是冒号，然后是 100%