无法在水平可滚动的 div 中调整表格列的大小答案

【问题标题】：can not resize a table Column in a horizontally Scrollable div无法在水平可滚动的 div 中调整表格列的大小
【发布时间】：2019-09-16 11:38:16
【问题描述】：

我有一张有 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>

【问题讨论】：

标签： javascript css vue.js resize scrollable

【解决方案1】：

您需要表格宽度，然后需要溢出到父类。检查sn-p。

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>

【讨论】：

但是如果我在里面放一个长数据，它就会停止工作。它不会调整大小也不会滚动。
我在一个 td 中添加了长数据及其工作。检查更新的答案。
很抱歉没有把我的问题说清楚。如您所见，它垂直而不是水平变化。长文本的 td 只会缩小，我希望它向右扩展。是否可以仅使用 CSS？
很难理解你想要什么。