Html 如何修复内容框外的溢出数据表？

我在不同的页面中有一些数据表。在少数页面中，表看起来很好，在某些页面中，它超过了页面上的值并溢出。如何修复它

代码如下：

<div class="row">
  <div class="col-md-12 col-sm-12 datagrid">
    <table
      style="width: 100%;"
      id="table"
      class="table table-striped table-hover table-bordered table-hd"
    >
      <thead>
        <tr class="gridheader">
          <td style="width: 5%;">Data 1</td>
          <td style="width: 20%;">Data 2</td>
          <td style="width: 10%;">Data 3</td>
          <td style="width: 10%;">Data 4</td>
          <td style="width: 10%;">Data 5</td>
          <td style="width: 5%;">Data 6</td>
          <td style="width: 5%;">Data 7</td>
          <td style="width: 10%;">Data 8</td>
          <td style="width: 10%;">Data 9</td>
          <td style="width: 5%;">Data 10</td>
          <td style="width: 5%;">Data 11</td>
          <td style="width: 5%;">Data 12</td>
        </tr>
      </thead>
      <tbody>
        <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>
        </tr>
      </tbody>
    </table>
  </div>
</div>

工作台精细化的图像：

页面中表格溢出的图像：

---

两个页面使用相同的代码，为什么会溢出？即使是水平滚动条也没有显示出来，而且不知何故，它看起来像是表格出了框，破坏了设计。

您面临这个问题，因为您提供的列宽不足以在一行中同时容纳列名和排序选项，因此，为了避免此类问题，您可以使数据表具有响应性

您可以在下面的链接中阅读更多关于此的信息

---

如果你想在a里面有很多东西，最好添加overflow-x:auto

数据1 数据2 数据3 数据4 数据5 数据6 数据7 数据8 数据9 数据10 数据11 数据12

---

爵士为我创建了水平滚动条。但是有没有其他方法可以在页面中修复它，因为我的设计看起来不太好，我在问dis…@Riya我这么做是因为我也考虑了手机。当你有这么多的表格时，表格将不会在移动视图中放大，字体将减少，因为有很多tr标签，因此最好使用滚动，而不是将表格宽度设为100vw。先生，感谢您的帮助，但是删除排序会使我的表格在页面中修复。但我还是放弃了投票给你及时的帮助姐姐。。谢谢你sir@Riya从未提及：sir ur one解决了我的问题，但不是响应性问题，因为您提到了列名和排序选项是主要问题，我删除了除数据1之外的所有列的排序选项，现在对我来说它工作正常。`{bSortable:false，aTargets:[1,2,3,4,5,6,7,8,9,10,11]}`.我在datatable脚本中添加了这个。这对我很有用。当你的答案给我答案时，我把它勾选为正确答案