Question

如果单击按钮，则div会从col-md-8扩展到col-md-12。在此div中，我们有一个由Bootstrap管理的table.table.table-active。

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

It seems to be a knows issue，但是，对我没有任何作用。

当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>

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();
  }
});

Answer 1

您需要尝试使用@media使其具有响应能力，因为此问题现在很常见，因此尝试像这样{sm-md-lg-xl}添加.table-responsive{-sm|-md|-lg|-xl}，使表overflow-Y:auto;并覆盖引导程序类

参考：-https://getbootstrap.com/docs/4.4/content/tables/

Answer 2

正确的方法是：

删除.table-sensitive：这样，表内容本身将占用所有可用空间。
将最大宽度：100％和 overflow-y：auto 应用于表的包装器。

我无法使用+按钮来显示乍一看不可用的内容，因为使用此解决方案，我们需要水平滚动才能看到所有表格。

调整窗口大小时，Bootstrap表不会自行调整大小

2 个答案: