表格單元格中的水平滾動

Question

我有以下特殊問題。讓我們開始的代碼片段：

... 
<td> 
    <div class="scrollable">...</div> 
    ...other cell content... 
</td> 
... 

現在我想表呈現彷彿div.scrollable不會採取任何的橫向空間（即div.scrollable不會對錶的右側推），但秀水平滾動條（在div.scrollable上，而不是在整個單元格上）如果div.scrollable比包含單元格更寬。有可能通過CSS來完成嗎？

謝謝！

Answer 1

幸得高價作爲他的jsfiddle例子回答了這個問題，但在這裏有代碼的答案，我將其附加波紋管：

... 
<style type="text/css> 
    .mytable { 
    table-layout: fixed; 
    } 
    .scrollable{ 
    overlow-y: auto; 
    } 
</style> 
... 
<table class="mytable"> 
<tr> 
    <td> 
    <div class="scrollable">...</div> 
    other content... 
    </td> 
</tr> 
</table> 

Answer 2

使用您的基本示例，您可能需要在td上設置一個寬度，並使用overflow和overflow-y。 overflow-y只是CSS3，但您沒有指定IE8及更低版本。

編輯對不起，你還需要display:block;在td

td { display: block; width: 50px; } 
.scrollable { overflow: scroll; overflow-y:hidden; } 

UPDATE： 見的jsfiddle例子中，注意在桌子上，固定佈局的寬度爲100％..這就是停止例如從向視口添加水平滾動並繼續。 http://jsfiddle.net/MMeTe/4/