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

Question

我想在我的表上有一个水平滚动条。

Html代码：

正如你所看到的，我已经使用了引导程序，但它仍然不起作用。在其他模块中，它运行良好。tbody数据是在调用ajax之后添加的。

我也尝试过：

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。这是防弹的。CCD_ 2表示"；父母宽度的100%"；，但是，如果父对象已经大于屏幕，它就无法工作。CCD_ 3表示"；视口宽度的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