css水平滚动表格

我想构建一个水平滚动的时间轴。css水平滚动表格

我有一个包装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 compatable（只是我自己的好奇心）

来源

2012-09-20 we-all-fall-down

如果你能解决这个文本的width（像素或百分比）使用此解决方案：

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

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

注意，你可以使用不同的选择文本（如class）

来源

2012-09-20 15:41:11 albertedevigo

你意识到固定的宽度是“站点导航”文本？不是几个月，这将占用剩余的宽度。 – albertedevigo

我已更新小提琴以显示此工作：http://jsfiddle.net/fhL9u/5/ –

我已经标记为正确的，因为第一个TD已经有一个宽度（导航）谢谢你！ –

可能的解决方法....

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

table { display: block; }

然后.wrap类分配表和删除DIV涵盖了几个月。

Fiddle here

仅适用于Chrome测试。

来源

2012-09-20 15:49:02 Scott

你可以只是把宽度上div.wrap，说400px-的作品，是的代码只有一行:-)

来源

2012-09-21 13:45:05

css水平滚动表格

回答

相关问题