How can I achieve a table with table-layout: auto and a 100% width that overflows horizontally when the window is too narrow without showing a scrollbar?
Consider these examples:
WORKING EXAMPLE 1
<div style="width: 100%; overflow-x: auto">
<table style="table-layout: auto; width: 100%; overflow-x:auto; border: 1px solid black">
<tr>
<td>dcsdcsdcasd1</td>
<td>dcsdcsdd2</td>
<td>dcsdcsdasxascasd3</td>
<td>dcsdcsdasd4</td>
<td>dcsdcsdxasacasd5</td>
<td>dcsdcsdcxasd6</td>
<td>dcsdcsxaxasdcasd7</td>
<td>dcsdasd8</td>
<td>dcsdd9</td>
<td>dcsdxaxasxascsdcasd10</td>
</tr>
</table>
</div>NOT WORKING EXAMPLE 2
<table>
<tr>
<td>
<div style="width: 100%; overflow-x: auto">
<table style="table-layout: auto; width: 100%; overflow-x:auto; border: 1px solid black">
<tr>
<td>dcsdcsdcasd1</td>
<td>dcsdcsdd2</td>
<td>dcsdcsdasxascasd3</td>
<td>dcsdcsdasd4</td>
<td>dcsdcsdxasacasd5</td>
<td>dcsdcsdcxasd6</td>
<td>dcsdcsxaxasdcasd7</td>
<td>dcsdasd8</td>
<td>dcsdd9</td>
<td>dcsdxaxasxascsdcasd10</td>
</tr>
</table>
</div>
</td>
</tr>
</table>In example 2, when the window is resized below the content width, a horizontal scrollbar appears for the entire window due to the wrapping table. This is not the desired behavior. However, in example 1, this issue is resolved successfully. Any suggestions on how to fix this while keeping the outer wrapping table present?