0

我正在尝试将表格的每一列设为页面宽度的 25%。当我有超过四列时，我希望能够水平滚动表格以查看其他列。

所以我将所有单元格的宽度设置为固定数量的像素（等于我固定页面宽度的 25%）。我尝试设置overflow-x为两者scroll然后auto. 但是在这两种情况下，列宽都被压缩了，因此表格宽度永远不会超过页面的宽度。

似乎我的单元格宽度被完全忽略了！如何告诉浏览器尊重我的列宽并让表格变得足够宽以容纳它们？

注意：我正在使用 ASP.NET MVC 以编程方式构建页面。我不知道会有多少列。但是我在构建 HTML 时确实知道列数。

4

1 回答 1

1

鉴于问题：

body {
    width: 100%;
}
#percent {
    width: 100%;
}
#percent td {
    width: 25%;
    background: #cdd;
}​

<p>Percent only</p>
<table id="percent">
<tbody>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
</tbody>
</table>

http://jsfiddle.net/userdude/3SKwP/

表格的宽度不会超出body元素的宽度，因为两者都设置为100%.

为了弥补缺少定义width来强制body溢出，您可以min-width在td元素上使用：

#percent,
#fixed {
    width: 100%;
}
#percent td,
#fixed td {
    width: 25%;
    background: #cdd;
}
#fixed td {
    min-width: 150px;
}​

<p>min-width: 150px</p>
<table id="fixed">
<tbody>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
</tbody>
</table>​

http://jsfiddle.net/userdude/3SKwP/1/

这样做的缺点，如果你想这样称呼它，就是 IE7 不支持min-width. 因此，如果您需要支持它，则必须为它填充一些东西。但除此之外，这对你来说应该很好。

于 2012-09-29T15:00:14.980 回答