duplicate headers when using Handsontable

问题

I am working with Handsontable, and the headers are shown twice. What is causing this to happen?

This is my code:

<script type="text/javascript">
        $(document).ready(function () {

          var data = [
              ['2009', 0, 2941, 4303, 354],
              ['2010', 3, 2905, 2867, 412],
              ['2011', 4, 2517, 4822, 552],
              ['2012', 2, 2422, 5399, 776]
            ],
            container = document.getElementById('example'), hot;

          hot = new Handsontable(container, {
            data: data,
            minSpareRows: 1,
            colHeaders: true,
            contextMenu: true,
            colHeaders: ['Cuenta Única', 'Número Comercio', 'Número PDV', 'Máximo Cuotas', 'Grupo Afinidad'],
            manualColumnResize: true,
            colWidths: [120, 120, 120, 120, 120, 120],
          });
        });
</script>

<div id="example"></div>

回答1:

Here's the deal. As you may be aware, Handsontable allows you to freeze columns. To do this, there are ALWAYS two sets of tables rendered. You correctly found it by noting that the second table is called ht_clone_top. This clone is what allows you to freeze tables, so if you remove it, even though you will fix your bug, you will not be able to freeze rows.

I can tell you what I think might be your problem as this is a common issue. You probably have CSS which modifies your table element. Unfortunately, you have to ensure that you also modify the clone tables. It's a really tough problem to solve given the nature of CSS but with enough effort, you can fix this issue!

回答2:

It looks like there is a small error in your code.

replace this line container = document.getElementById('example'), hot; with the following code container = document.getElementById('example');

回答3:

I have fixed the problem by removing the padding from the Hansontable container DIV element.

来源：https://stackoverflow.com/questions/32019489/duplicate-headers-when-using-handsontable