如何正确居中手持台

Question

I am using handsontable and I would like to show a table centered in the page or a div.

I have managed to do this by changing the width of the container div after the table is initiated (see snippet). However this seems cumbersome.

 $(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>

Is there an easy/better way of centering a handsontable?

Answer 1

Using your work-around, I would recommend using afterRender instead of afterInit in order to update the size of your table whenever the handsontable is rendered.

This would be especially useful if the user changes the size of the screen, if you allow the addition of columns or rows, or if there are other possibilities of the table changing sizes after the original initialization.

Answer 2

Based on the earlier answers, I used the afterRender (and afterChange) events as follows:

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

However, when you hide a column, it seems that afterRender is fired too early, before the element with the wtHider class is updated.

Adding a delay of 0 ms solves this issue:

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

Note: Tested using chromium version 87.0.4280.66, Ubuntu 20.04 and handsontable 8.2.0