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计算不起作用。

目前的效果是： enter image description here 预期的效果是表格的宽度超过容器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>

效果是： enter image description here 注意第二个单元格（应该是200px）和第一个单元格一样窄。

任何人都可以对这个问题有所了解吗？提前谢谢。

Answer 1

添加css：

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

并从表中删除style='table-layout: fixed; width: 1px;'

Answer 2

桌子的位置绝对可以接受吗？

<table border="1" style="position:absolute;">

这样可以使div不再包含水平表。但是，当然，div也不再垂直包含表格。你可以通过手动给出div高度来解决这个问题。

Answer 3

对于固定宽度的单元格情况，Merijn的回答有点微调：

不是指定全局最小宽度，而是像每个单元格一样指定它：

<th style="min-width: 62px; width: 62px;">A</th>
<th style="min-width: 200px; width: 200px;">B</th>
<th style="min-width: 62px; width: 62px;">C</th>

至少这样，您的个人宽度不会被忽略，为您提供比容器更宽的表格，以及不规则宽度的单元格。

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

3 个答案: