带有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 */

}

编辑see fiddle。

Answer 2

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