不能在水平滾動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