Javascript 引导表赢得'；调整窗口大小时不能自行调整大小

如果我们点击一个按钮，一个div将扩展到col-md-8到col-md-12。在这个div中，我们有一个由Bootstrap管理的table.table.table-responsive

调整窗口大小时，表大小/合并tds不会自行刷新（需要刷新）

，不过，对我来说什么都不管用

当div展开时：它会展开，但如果我能使表也展开，那么表中的内容就不会展开。你有什么想法吗

我编写的代码的示例

我非常感谢你的帮助，谢谢

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">

<div id="table-wrapper">
  <table id="table" class="table table-responsive table-bordered">
    <thead id="table-thead">
      <th>Blanai</th>
      <th>Blanai</th>
      <th>Blanai</th>
      <th>Blanai</th>
      <th>Blanai</th>
      <th>Blanai</th>
      <th>Blanai</th>
      <th>Blanai</th>
      <th>Blanai</th>
      <th>Blanai</th>
    </thead>
    <tbody id="table-tbody">
      <td>Pounrn</td>
      <td>Pounrn</td>
      <td>Pounrn</td>
      <td>Pounrn</td>
      <td>Pounrn</td>
      <td>Pounrn</td>
      <td>Pounrn</td>
      <td>Pounrn</td>
      <td>Pounrn</td>
      <td>Pounrn</td>
    </tbody>
  </table>
</div>

<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>

---

您需要尝试使用

@media

使其响应，因为这个问题现在很常见，所以 尝试像这样添加

{sm md lg xl}

。表响应{-sm |-md |-lg |-xl}，使您的表

溢出-Y:auto，并重写引导类

参考资料：-
正确的方法是：


Remove.table responsive：这样，表内容本身将占用所有可用空间

将最大宽度：100%和溢出-y:auto应用于表的包装器


我无法使用+按钮来显示第一眼就看不到的内容，因为使用此解决方案，我们需要水平滚动以查看所有表格。
感谢您的帮助，非常感谢！不幸的是，它不起作用。。。我知道了如何扩展表，但即使手动重置bootstrapTable的视图，表的内容仍然保持不变。
const resetTableView = () => {
  const tableWrapper = document.getElementById('table-wrapper');
  const thead = document.getElementById('table-thead');
  const tbody = document.getElementById('table-tbody');
  const wrapperWidth = tableWrapper.style.width;
  $(table).bootstrapTable('resetView');
  table.style.width = wrapperWidth;
  thead.style.width = wrapperWidth;
  tbody.style.width = wrapperWidth;
  console.log('table view reset ok');
};

aSpecialBtn.addEventListener("click", (() => {
  const wrapper = document.getElementById('table-wrapper-wrapper');
  const wrapperIsReduced = doesWrapperIsReduced(wrapper);

  if (wrapperIsReduced) {
    expandWrapper(wrapper); // calls resetTableView();
  } else {
    reduceWrapper(wrapper); // calls resetTableView();
  } 
  return resetTableView();
}));
document.addEventListener("keypress", e => {
  if (e.key == 'Enter') {
    resetTableView();
  }
});