表中的css水平滚动

Question

我想构建一个具有水平滚动的时间轴。

我有一个包装DIV，里面有几个月。每个月都是DIV内联块。这有效：

<div class="wrap">
    <div class="month">Jan 2013</div>
    <div class="month">Feb 2013</div>
    ...
</div>

这几乎可以工作，但由于我的客户端网站使用表格进行布局，滚动条不起作用。这失败了：

<table><tr><td>

<div class="wrap">
    <div class="month">Jan 2013</div>
    <div class="month">Feb 2013</div>
    ...
</div>

</td></tr></table>

这是一个显示我的意思的jsfiddle：http://jsfiddle.net/fhL9u/2/

注意：顶部时间轴示例适用于调整浏览器大小。它是页面宽度的100％（或包含元素。）

如何让第二个时间线正确溢出？它必须占用屏幕的剩余宽度（没有：100px 黑客），如果可能的话，只会在月份溢出时显示滚动条。

这是一个内部应用程序，所以如果需要，我可以告诉人们使用Firefox或Chrome。这意味着我可以使用高级CSS3内容或特定于浏览器（-webkit或-moz）的东西。我更喜欢IE8兼容（仅仅是为了我自己的好奇心）

Answer 1

如果您可以修复该文字的width（以像素或百分比表示），请使用此解决方案：

table {
    table-layout: fixed;
    width: 100%;
}

td:first-child {
    width: 100px;    /* or width: 15%; */
}

请注意，您可以为文本使用不同的选择器（例如class）

Answer 2

可能的解决方案......

主要问题可能是“网站导航”单元格是滚动区域的一部分。

table { display: block; }

然后将.wrap类分配给表并删除包含月份的div。

Fiddle here

仅在Chrome中测试过。

Answer 3

你可以在div.wrap上放一个宽度，比如说400px-它有效并且只是一行代码： - ）