Reputation: 1654
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
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