I am struggling to resize the columns of a large table with 20 headers. Despite trying to place the table inside a div with overflow:auto, I still cannot achieve horizontal scrolling or make the div expand when resizing the columns.
A sample code snippet illustrating my issue can be found below.
P.S. I am attempting this without incorporating jquery.
<html>
<head>
</head>
<style>
.tg {border-collapse:collapse;border-spacing:0; width:100%;}
.tg td{padding:10px 5px;border-style:solid;border-width:1px;}
.tg th{padding:10px 5px;border-style:solid;border-width:1px;}
.tg .tg-dvpl{border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-0pky{
top: 0;
z-index: 10;
resize: horizontal;
overflow: auto;
min-width: 70px;
position: relative;
}
.tg tr{ position: relative;}
</style>
<body>
<div style="height: 300px; overflow: auto;">
<table class="tg">
<tr>
<th class="tg-dvpl" colspan="5">H1</th>
<th class="tg-dvpl" colspan="8">H2</th>
<th class="tg-dvpl" colspan="8">H3</th>
</tr>
<tr>
<td class="tg-0pky">#</td>
<td class="tg-0pky">1</td>
<td class="tg-0pky">2</td>
<td class="tg-0pky">3</td>
<td class="tg-0pky">4</td>
<td class="tg-0pky">5</td>
<td class="tg-0pky">6</td>
<td class="tg-0pky">7</td>
<td class="tg-0pky">8</td>
<td class="tg-0pky">9</td>
<td class="tg-0pky">10</td>
<td class="tg-0pky">11</td>
<td class="tg-0pky">12</td>
<td class="tg-0pky">13</td>
<td class="tg-0pky">14 </td>
<td class="tg-0pky">15</td>
<td class="tg-0pky">16</td>
<td class="tg-0pky">17</td>
<td class="tg-0pky">18</td>
<td class="tg-0pky">19</td>
<td class="tg-0pky">20</td>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
<td></td>
<td colspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>