1

我有一个宽度为 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 中的“@group.Name”通常应该小于我给 th 的 150px。

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

4

3 回答 3

1

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

style="width:1000px"

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

于 2013-09-27T20:19:26.247 回答
1

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

于 2013-09-27T20:04:04.473 回答
1

原因是您将 width 设置为allTDs。

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

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

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

  1. 将表格 CSS 宽度设置为auto.

  2. 至少 1TD必须没有width- 数据透视列。

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

于 2013-09-27T20:27:53.300 回答