html - 如何使 HTML 表格(在固定宽度的 div 中)适应其单元格而不是容器的宽度？

Question

我想让下表适应单元格的宽度，而不是其容器:

<div style='width: 700px; border: 1px solid red;'>
    <table border="1" style='table-layout: fixed;'><tbody>
        <tr>
            <th style="" colspan="3">Group 1</th>
            <th style="" colspan="5">Group 2</th>
            <th style="" colspan="4">Group 3</th>
        </tr>
        <tr>
            <th style="width: 62px;">A</th>
            <th style="width: 200px;">B</th>
            <th style="width: 62px;">C</th>
            <th style="width: 62px;">D</th>
            <th style="width: 62px;">E</th>
            <th style="width: 62px;">F</th>
            <th style="width: 62px;">G</th>
            <th style="width: 62px;">H</th>
            <th style="width: 62px;">I</th>
            <th style="width: 100px;">J</th>
            <th style="width: 62px;">K</th>
            <th style="width: 68px;">L</th>
        </tr>
    </tbody></table>
</div>

容器的宽度比单元格宽度的总和窄。可以在此处显示水平滚动条，但表格不能比其容器宽。如果我计算 colspan 和表格的总宽度，它可以完成这项工作，但是如果单元格具有非 px 宽度(例如“%”或“em”)怎么办？那么静态px计算就无法进行。

当前效果是: 预期的效果是表格的宽度超过容器 div 的宽度。

但是直接为表格设置宽度也有问题:为单元格设置的宽度将被忽略。例如:

    <div style='width: 700px; border: 1px solid red;'>
    <table border="1" style='table-layout: fixed; width: 900px;'><tbody>
        <tr>
            <th style="" colspan="3">Group 1</th>
            <th style="" colspan="5">Group 2</th>
            <th style="" colspan="4">Group 3</th>
        </tr>
        <tr>
            <th style="width: 62px;">A</th>
            <th style="width: 200px;">B</th>
            <th style="width: 62px;">C</th>
            <th style="width: 62px;">D</th>
            <th style="width: 62px;">E</th>
            <th style="width: 62px;">F</th>
            <th style="width: 62px;">G</th>
            <th style="width: 62px;">H</th>
            <th style="width: 62px;">I</th>
            <th style="width: 100px;">J</th>
            <th style="width: 62px;">K</th>
            <th style="width: 68px;">L</th>
        </tr>
    </tbody></table>
</div>

效果是: 请注意，第二个单元格(应为 200 像素)与第一个和第三个单元格一样窄。

有人可以解释一下这个问题吗？提前致谢。

Answer 1

添加CSS:

th{
    min-width:50px; /*for instance*/
}
div{
    overflow-x:scroll;
}

并删除style='table-layout:fixed;宽度:1px;' 来自表格