我有一个包含 20 个标题的大表。我想调整表格列的大小，但由于表格太大，它停止了调整大小。我已经尝试将表格放在 div 中，使用 overflow:auto 但是当我尝试调整大小时它不会水平滚动或使 div 变大表列。
我在下面添加了我正在尝试做的示例。
附言我试图在不添加 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>
最佳答案
您需要表的宽度然后需要溢出到父类。检查片段。
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>关于javascript - 无法调整水平滚动 div 中的表列的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57956033/