不能在水平滚动div中调整表列的大小

Question

我有一张带20个标题的大桌子。 我想调整表列的大小，但是由于表太大，因此停止调整大小。 我试过将表放在带有overflow:auto的div ，但是当我尝试调整表列的大小时，它不会水平滚动或使div更大。 我在下面添加了一个示例。 PS我试图做到这一点，而无需添加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>

Answer 1

您需要表的宽度，然后需要溢出到父类。 检查代码段。

 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>

不能在水平滚动div中调整表列的大小

问题描述

1 个解决方案

解决方案1
0 2019-09-16 11:42:35

不能在水平滚动div中调整表列的大小

问题描述

1 个解决方案

解决方案1 0 2019-09-16 11:42:35

解决方案1
0 2019-09-16 11:42:35