表格内的css水平滚动答案

【问题标题】：css horizontal scroll within a table表格内的css水平滚动
【发布时间】：2012-09-13 00:19:24
【问题描述】：

我想构建一个水平滚动的时间线。

我有一个包装 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% 宽度。

如何让第二条时间线正确溢出？它必须占据屏幕的剩余宽度（没有 with: 100px hacks），并且如果可能，仅在月份溢出时显示滚动条。

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

可能的解决方案....

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

table { display: block; }

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

仅在 Chrome 中测试。

【讨论】：

【解决方案3】：

您可以在 div.wrap 上设置一个宽度，例如 400 像素——这很有效，而且只是一行代码：-)

【讨论】：