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

【问题标题】：How to make an HTML table (in a fixed-width div) adapt to the width of its cells instead of its container?如何使 HTML 表格（在固定宽度的 div 中）适应其单元格的宽度而不是其容器的宽度？
【发布时间】：2013-02-20 16:35:16
【问题描述】：

我想让下表调整它的宽度以适应单元格，而不是它的容器：

<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>

效果是：请注意，第 2 个单元格（应该是 200 像素）与第 1 个和第 3 个单元格一样窄。

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

【问题讨论】：

标签： html width html-table

【解决方案1】：

添加css：

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

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

【讨论】：

顺便说一句，我不确定 A B C 是否是内容，如果是，请不要将 TH 用于表格内容。 TH 表示表头，适用于组名，但其余部分应为 TD。以防万一
它是一个更大的表格“小部件”的标题部分，所有这些都是标题单元格。
请忽略宽度：1px；这是一些测试代码。我不小心粘贴到这里了。
感谢您的建议。 min-width 方法适用于大多数浏览器，但在 IE7 中失败。也许我需要和我的老板谈谈拒绝支持 IE7...
是的，不用担心 IE7，使用 IE7 的少数可能甚至不在您的目标受众中

【解决方案2】：

摆放桌子绝对可以接受吗？

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

这样可以使 div 不再水平包含表格。但是，当然，div 也不再包含垂直的表格。不过，您可以通过手动指定 div 高度来解决此问题。

【讨论】：

在我的情况下手动设置高度也很困难，因为表格内容一直在变化。但即使设置为绝对，它似乎仍然无法工作，因为容器必须是“位置：相对；”

【解决方案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>

至少这样，您的个人宽度不会被忽略，给您一个比容器更宽的表格，并且单元格宽度不规则。

【讨论】：

是的，如果IE7没有更好的选择，我会采取这种方法。