CSS/HTML：當表格不適合屏幕時如何強制水平滾動條？

我有一個橫向格式的大桌子，要求每列的最小寬度（見下文），以便列的寬度足以進行正確的輸入。CSS/HTML：當表格不適合屏幕時如何強制水平滾動條？

由於這個原因，當達到這個最小尺寸而不是進一步縮小表格的列時，我需要強制一個水平滾動條出現。

該表共有15列，使用一個colgroup，第一列有「col1」類，第二個有「col2」，其他所有有「col3」應用樣式。

然後我嘗試添加下列樣式，但表格仍然進一步縮小，並且我在使用較小屏幕尺寸進行測試時沒有獲得所需的水平滾動條。

有人能告訴我我在做什麼錯嗎？在這裏使用@ media screen會更有意義嗎？

我的CSS：

#myTable { 
    font-size: 14px; 
    min-width: 100%; 
    overflow-x: scroll; 
    table-layout: fixed; 
} 
#myTable .col1 { 
    width: 35px; 
} 
#myTable .col2 { 
    min-width: 180px; 
} 
#myTable .col3 { 
    min-width: 108px; 
    width: 6.5%; 
}

很多感謝，邁克

來源

2015-07-02 keewee279

嘗試包裹表中一個div並添加'在DIV溢出x'。 –

如果您可以通過[jsbin]（http://jsbin.com/?html）或[jsfiddle]（https://jsfiddle.net）傳遞完整示例，那麼將表放入滾動容器 –

將會非常有幫助/）也在你的問題中，你可以把一個例子與HTML和CSS – RokumDev

包裹在一個div表，並設置那裏的一切。

<div id="tableWrapper"> 
    <table id="myTable"> 
     <tr> 
      ... 
     </tr> 
    </table> 
</div>

工作的jsfiddle：https://jsfiddle.net/h037abq3/24/

來源

2015-07-02 19:23:12 JDrost1818

謝謝！我嘗試過，但它不會改變我的情況。 – keewee279

你的代碼是什麼樣的？ – JDrost1818

再次感謝。我想到了這一點 - 我必須扭轉一些其他的東西，但這指出我在正確的方向，所以我接受這個答案。 :) – keewee279

CSS/HTML：當表格不適合屏幕時如何強制水平滾動條？

回答

相關問題