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水平滾動表格

回答

相關問題