can not resize a table Column in a horizontally Scrollable div
Question
I have a big table with 20 headers. I Want to resize the table columns but as the table is too big it stopped resizing. I have tried putting the table inside a div with overflow:auto but it will not scroll horizontally or make the div bigger when i try to resize the table columns. i have added a sample of what i am trying to do below. PS I am trying to do it without adding 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>
1 answers
solution1
0 2019-09-16 11:42:35
You required width to table then need overflow to parent class. check snippet.
div { width: 1000px; overflow-x: scroll; } .tg { border-collapse: collapse; border-spacing: 0; width: 1900px; } .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; }
<div> <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">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
With React, how can I horizontally scroll to the selected item in a scrollable div?
How can I have visible vertical overflow in a horizontally scrollable table?
Horizontally scrollable table with Twitter bootstrap
Horizontally and vertically scrollable large table
Div resize horizontally like in twitter
Child div horizontally scrollable but fix parent window
Bootstrap 3 scrollable div for table
Horizontally resize the div by dragging an edge of div
Horizontally scrollable div which contains vertical scrollable div will not scroll horizontally on iOS
How to set a Div scrollable horizontally but vertically fixed inside another Div
Related Tags