CODEWITHSUNDEEP
htmlcssscrollbaroverflow
keewee279
keewee279

Reputation: 1654

CSS / HTML: How to force horizontal scrollbar when table does not fit on screen?

I have a large table in landscape format that requires to have a minimum width for each column (see below) in order for the columns to stay wide enough for proper inputs.

Due to this I need to force a horizontal scrollbar to appear when this minimum size has been reached instead of further shrinking of the table's columns.

The table has 15 columns in total and uses a colgroup, the first column has the class "col1", the second one has "col2" and all others have "col3" to apply the styles.

I then tried to add the following styles but the table is still being shrinked further and I am not getting the required horizontal scrollbar when testing with a smaller screen size.

Can someone tell me what I am doing wrong here ? Would it make more sense to use @ media screen here ?

My 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%;
}

Many thanks in advance, Mike

Upvotes: 2

Views: 9108

Answers (1)

JDrost1818
JDrost1818

Reputation: 1126

Wrap the table in a div and set everything there. 

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

Working JSFiddle: https://jsfiddle.net/h037abq3/24/

Upvotes: 6

Related Questions