Force HTML table to exceed div width: CSS - html

Question

This question is asking the opposite of what usually is desired: a fixed-width table that exceeds the width of its parent div(s).
In fact, the following implementation works as expected in Chrome/Chromium based browsers:
#myTable {
border-collapse: collapse;
/* Collapse borders */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
width: 1040px;
/* Full-width */
table-layout: fixed;
}
/* This is intended to be in a media query for screens less than 768 px */
#myTable {
width: 745px;
/* Full-width + 225px */
}
td:nth-child(1),
th:nth-child(1) {
width: 51.9px;
}
td:nth-child(2),
th:nth-child(2) {
width: 158.783px;
}
td:nth-child(3),
th:nth-child(3) {
width: 225px;
}
td:nth-child(4),
th:nth-child(4) {
width: 78.2667px;
}
td:nth-child(5),
th:nth-child(5) {
width: 116.15px;
}
td:nth-child(6),
th:nth-child(6) {
width: 100.833px;
}
<div style="background-color: #f0f0f0; padding: 5px; width: 540px;">
<table id="myTable" cellspacing="0" cellpadding="2" border="1">
<thead>
<tr>
<th style="text-align:right;">col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
<tr>
<td align="right">col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
<tr>
<td align="right">col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
<tr>
</tbody>
</table>
</div>
However, when checking in Firefox and Microsoft Edge, the specified table/column widths are not honored, instead conforming to the parent div.
Most suggested solutions I've found appear to recommend applying table-layout: fixed; rule to the table, however, it's already applied in this example to no effect.
Anyone have any ideas?

Answer 1

Typically I use a class/ID wrapper and based on the max-width of the wrapper assign the table's width:100% which will then create the scrollbar effect with the overflow:scroll hidden property which is what I think you're looking for? If you want vertical scroll.
I never use the table-layout fixed attribute which would seem to be the problem., but then again I don't use it.
Just assign the table CSS at width:100% and use the #media with the table's wrapper based on screen size. This will work great for the column's adaptations too. You will just have to adjust accordingly.
By assigning the parent div's width inline you are creating somewhat of a roadblock for your responsive css capabilities as you cannot override inline styles. I'd change that approach.
#myTable {
border-collapse: collapse;
/* Collapse borders */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
width: 100%;
overflow: scroll hidden;
}
.tbl_wrapper{max-width: 540px;}
#media screen and (max-width: 768px){
<!--Do some edits based on screen size //-->
.tbl_wrapper{max-width: 540px;}
}
#media screen and (max-width: 1040px){
<!--Do some edits based on screen size //-->
.tbl_wrapper{max-width: 640px;}
}
<div class="tbl_wrapper" style="background-color: #f0f0f0; padding: 5px;">
<table id="myTable" cellspacing="0" cellpadding="2" border="1">
</table>
</div>