Question

我正在尝试将表格的每列25％放在页面的宽度上。当我有四列以上时，我希望能够水平滚动表格以查看其他列。

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

好像我的单元格宽度完全被忽略了！如何告诉浏览器尊重我的列宽并允许表格扩展到足以容纳它们？

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

Answer 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。所以如果你需要支持它，你将不得不为它提供一些东西。但除此之外，这应该对你有好处。

无法水平滚动表

1 个答案: