Question

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

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

在那里，我有一个表格，其中包含1行和该行内的动态单元格数量。

<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）不会以我给他们的宽度呈现

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

如何解决这两个问题？

Answer 1

尝试<th nowrap style="...">强制细胞扩大而不是包裹。

Answer 2

我可以看到你知道每列的宽度，所以你知道总的表宽度。如果总表宽度为1000px，则添加：

style="width:1000px"

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

Answer 3

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

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

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

您有2种方法可以修复您的表格：

将表格CSS宽度设置为auto。
至少有一个TD必须没有width - 一个支点列。

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

在定义单元格宽度方面遇到麻烦（它们以其他宽度渲染）

3 个答案: