将水平滚动条添加到 html 中的表格

Question

我想要一个水平滚动条到我的表格。

HTML代码：

如您所见，我已经使用了引导程序，但它仍然无法正常工作。在其他模块中它工作正常。 调用 ajax 后添加 tbody 数据。

我也尝试过：

overflow-x: auto
white-space: nowrap

数据未正确显示在右侧：它超出了屏幕尺寸，我必须将其缩小才能看到整个表格。

<div class="modal fade" id="new-modal">
  <div class="tble-grid-wrapper">
    <div class="table-responsive pl-3 pr-3">
      <table id="selectedDevices" class="table table-sm table-striped" class="display">
        <thead>
          <tr>
            <th>HEADER 1</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
            <th>HEADER 4</th>
            <th>HEADER 5</th>
            <th>HEADER 6</th>
            <th>HEADER 7</th>
            <th>HEADER 8</th>
            <th>HEADER 9</th>
            <th>HEADER 10</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

1. 将您的表格包含在一个 div 中（在您的情况下已经完成）

2. 用width:100vw 约束这个div。这是防弹的。 width:100% 的意思是“100% 的父级宽度”，但是如果父级已经比屏幕大了，那就不行了。 width:100vw 表示“视口宽度的 100%”，不依赖于其他任何东西。

3. 添加overflow-x: auto 以允许水平滚动条。工作完成

下面的演示

#new-modal {
    width : 100vw;
    overflow-x: auto;
}

<div class="modal fade" id="new-modal">
  <div class="tble-grid-wrapper">
    <div class="table-responsive pl-3 pr-3">
      <table id="selectedDevices" class="table table-sm table-striped" class="display">
        <thead>
          <tr>
            <th>HEADER 1</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
            <th>HEADER 4</th>
            <th>HEADER 5</th>
            <th>HEADER 6</th>
            <th>HEADER 7</th>
            <th>HEADER 8</th>
            <th>HEADER 9</th>
            <th>HEADER 10</th>
            <th>HEADER 11</th>
            <th>HEADER 12</th>
            <th>HEADER 13</th>
            <th>HEADER 14</th>
            <th>HEADER 15</th>
            <th>HEADER 16</th>
            <th>HEADER 17</th>
            <th>HEADER 18</th>
            <th>HEADER 19</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 2

<div class="modal fade" id="new-modal" style="width:100%;overflow-x:scroll;">
  <div class="tble-grid-wrapper">
    <div class="table-responsive pl-3 pr-3">
      <table id="selectedDevices" class="table table-sm table-striped" class="display">
        <thead>
          <tr>
            <th>HEADER 1</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
            <th>HEADER 4</th>
            <th>HEADER 5</th>
            <th>HEADER 6</th>
            <th>HEADER 7</th>
            <th>HEADER 8</th>
            <th>HEADER 9</th>
            <th>HEADER 10</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>

你要找的是width: 100%; overflow-x: scroll