html - 带有 html 表格的可滚动 div

Question

我在带有滚动条的 div 中有一个表格。

表格中有一些列定义了宽度。直到那时表头都很好。

但是当我向网格添加更多列时，标题测试会被包装，这是我不想要的，而是我想要水平滚动。

正常：http: //jsfiddle.net/hVRW7/

更多专栏：http: //jsfiddle.net/hVRW7/1/

Answer 1

最快的解决方法是将<th>标签包装在跨度中，然后给它们固定宽度：

<table>
    <thead>
        <tr>
            <th><span>Label1</span></th>
            <th><span>Label2</span></th>            
        </tr>
    </thead>
</table>

然后样式为：

th span
{

    display:inline-block;
    width:300px; /* or what you wish */

}

编辑见 fiddle。

Answer 2

您的问题是您已将表格宽度的限制定义为 1024 像素，然后您定义了总宽度为 1430 像素的新列。然后所有浏览器都尽力使信息适合定义的 1024px 宽度。由于在您给定的示例中，您只是重复定义相同的列集，您确定需要所有列吗？如果不是，您应该将它们缩小到仅需要的范围，然后确定您的实际总宽度。在确定表格的最大宽度时，整个表格的定义宽度将优先于单个宽度。