如何正确居中手持式答案

【问题标题】：How to center a handsontable properly如何正确居中手持式
【发布时间】：2016-01-25 11:48:30
【问题描述】：

我正在使用 handsontable，我想在页面或 div 中显示一个表格。

我已经设法通过在表格启动后更改容器 div 的宽度来做到这一点（请参阅 sn-p）。不过这看起来很麻烦。

$(document).ready(function () {

  var container = document.getElementById('basic_example');
  
  var hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(10, 12),
    colHeaders: true,
    rowHeaders: true,
    afterInit: function () {
      $("#basic_example").css("width", $("#basic_example .wtHider").css("width")) 
    }
  });
  
});

#basic_example {
  margin-left: auto;
  margin-right: auto;
}

<link href="http://handsontable.com//styles/main.css" rel="stylesheet">
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>

<div id="basic_example"></div>

有没有一种简单/更好的方法可以使手持式桌面居中？

【问题讨论】：

jsfiddle.net/9kJB3/2 看看有没有帮助！！
看起来不错，但我的副作用是使单元格内的文本居中。
请注意，他的下拉菜单会引起奇怪的效果jsfiddle.net/o4xayoLn/1
我肯定会选择自动边距。你有办法在初始化handson组件之前知道父div的宽度吗？如果你不这样做并且你试图根据它初始化后发生的事情来集中它，那么你的解决方案非常好。如果您确实知道 div 的宽度是多少，那么只需将 handson div 的宽度设置为 100% 并将父 div 设置为您想要的任何值。
我事先不知道宽度，因为数据是可变的。我想我必须坚持afterInit。

标签： javascript html css twitter-bootstrap-3 handsontable

【解决方案1】：

使用您的解决方法，我建议使用 afterRender 而不是 afterInit，以便在渲染 handsontable 时更新表格的大小。

如果用户更改屏幕的大小，如果您允许添加列或行，或者如果在初始初始化后表格可能更改大小，这将特别有用。

【讨论】：

【解决方案2】：

根据之前的回答，我使用 afterRender（和 afterChange）事件如下：

  afterRender: function () {
    let wtHider = document.querySelector('#tableContainer .wtHider');
    container.style.width = wtHider.style.width
  },

但是，当您隐藏一列时，似乎 afterRender 在更新具有 wtHider 类的元素之前被触发得太早了。

添加 0 毫秒的延迟解决了这个问题：

   afterRender: function () {
    let wtHider = document.querySelector('#tableContainer .wtHider');
    setTimeout(() => {
      container.style.width = wtHider.style.width
    }, 0);
  },

注意：使用 chromium 版本 87.0.4280.66、Ubuntu 20.04 和 handsontable 8.2.0 进行测试

【讨论】：