html - 表格内的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 hacks），并且如果可能，仅在月份溢出时显示滚动条。

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

score 2 · Accepted Answer

如果您可以修复该width文本（以像素或百分比为单位），请使用此解决方案：

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

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

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

score 0 · Accepted Answer

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

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

table { display: block; }

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

仅在 Chrome 中测试。

score 0 · Accepted Answer

0

你可以在 div.wrap 上放一个宽度，比如 400px- 可以工作，而且只是一行代码:-)

于 2012-09-21T13:45:05.477 回答

3 回答 3