不能水平滾動表

Question

我想使我的表的每一列25％的頁面寬度。當我有四個以上的列時，我希望能夠水平滾動表格以查看其他列。

因此，我將所有單元格的寬度設置爲固定的像素數（等於我固定頁面寬度的25％）。我試着將overflow-x設置爲scroll，然後是auto。但是在這兩種情況下，列寬度都被壓縮，所以表格寬度永遠不會超過頁面的寬度。

看起來我的細胞寬度完全被忽略！我怎樣才能讓瀏覽器尊重我的列寬，並讓桌子的寬度足以容納它們？

注意：我用ASP.NET MVC編程構建頁面。事先不知道有多少列。但是當我構建HTML時，我知道列的數量。

Answer 1

鑑於問題：

body { 
    width: 100%; 
} 
#percent { 
    width: 100%; 
} 
#percent td { 
    width: 25%; 
    background: #cdd; 
}​ 

<p>Percent only</p> 
<table id="percent"> 
<tbody> 
    <tr> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
    </tr> 
    <tr> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
    </tr> 
</tbody> 
</table> 

http://jsfiddle.net/userdude/3SKwP/

表的寬度不會流超出body元件的寬度，因爲兩者都設置爲的100%的相對量。

爲了彌補缺乏定義width，迫使body溢出，您可以在td元素使用min-width：

#percent, 
#fixed { 
    width: 100%; 
} 
#percent td, 
#fixed td { 
    width: 25%; 
    background: #cdd; 
} 
#fixed td { 
    min-width: 150px; 
}​ 

<p>min-width: 150px</p> 
<table id="fixed"> 
<tbody> 
    <tr> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
    </tr> 
    <tr> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
    </tr> 
</tbody> 
</table>​ 

http://jsfiddle.net/userdude/3SKwP/1/

這樣做的缺點，如果你想稱之爲IE7不支持min-width。所以如果你需要支持的話，你必須爲它做點什麼。但除此之外，這對你來說應該很好。