在定义单元格宽度时遇到问题（它们以其他宽度呈现）答案

【问题标题】：Having troubles in defining cell widths (they render with other width)在定义单元格宽度时遇到问题（它们以其他宽度呈现）
【发布时间】：2013-09-28 04:37:50
【问题描述】：

我有一个宽度为 60% 的 div，overflow-x 设置为滚动。

<div style="width: 60%; overflow-x: scroll">
</div>

在其中，我有一个表格，其中有 1 行和该行内的动态单元格数（th's）。

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

    <table>
        <thead>
            <tr>
                <th style="width: 20px;">
                    <input type="checkbox" />
                </th>
                <th style="width: 300px">Name</th>
                <th style="width: 300px">Email</th>
                @foreach (Group group in groups)
                {
                    <th style="width: 150px">@group.Name</th>
                }
            </tr>
        </thead>
    </table>

</div>

渲染时，我遇到了两个问题

1) 表格将其宽度调整为 div 的 100%。我想要的是表格比 div 宽得多。这就是为什么 div 有“overflow-x:scroll”，这样表格就可以水平滚动了。

2) 单元格（th's）没有按照我给它们的宽度渲染

注意：动态创建的 th's 中的“@group.Name”通常应该小于我给 th's 的 150px。

我该如何解决这两个问题？

【问题讨论】：

标签： html css html-table

【解决方案1】：

尝试<th nowrap style="..."> 强制单元格变宽而不是环绕。

【讨论】：

谢谢，这解决了第 1 个问题。CSS 版本是“white-space:nowrap”。现在我需要解决第 2 个问题。

【解决方案2】：

正如我所见，您知道每列的宽度，因此您知道表格的总宽度。如果表格总宽度为 1000px，则添加：

style="width:1000px"

到表标签应该可以解决问题。我在 Chrome 中测试过这种方法，效果很好。

【讨论】：

【解决方案3】：

原因是您将宽度设置为 all TDs。

当浏览器渲染表格时，引擎会计算每个 TD 的宽度以匹配表格宽度。它将溢出/丢失的像素分配到表格列，挤压或拉伸它们。分布基于列宽（按百分比），较大的列在绝对像素数上越大。如果表中的列未指定 width，则此分布仅适用于它们，忽略具有显式宽度的列。

当然，如果表格是使用 width: auto 计算的 CSS 或没有设置宽度，列将保持其大小，表格宽度将是列大小的总和（加上表格边框等）。

你有两种方法来修复你的桌子：

将表格 CSS 宽度设置为 auto。
至少 1 个 TD 必须没有 width - 一个数据透视列。

使用其中之一，或两者兼而有之..

【讨论】：