时间戳

首页 > 解决方案 > 无法在水平可滚动的 div 中调整表格列的大小

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

问题描述

我有一张有 20 个标题的大桌子。我想调整表格列的大小，但由于表格太大，它停止调整大小。我曾尝试将表格放在其中div，但当我尝试调整表格列的大小时overflow:auto，它不会水平滚动或变大。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>

标签： javascriptcssvue.jsresizescrollable

解决方案

您需要表格宽度，然后需要溢出到父类。检查片段。

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>

推荐阅读