handsontable新增行或者列表格错位问题解决

    强大的handsontable表格可以实现类似excel一样的编辑，最近vue项目中有用到，正在熟悉它的配置，碰到一个小问题：新增列之后，表格线错位：

我开始是用元素查找了很久的css样式，看是否后面几列的列头高度是否相比第一列有了变化，但他们的高度值、padding、margin等都是一样的，没有找到不同。最后想到它是display:table-cell，我就网上查看了下这种类型的高度的设置问题，还真的是这个原因：

display:table内部的table-cell的高度问题：

可能是浏览器的兼容性问题导致没有内容的 table-cell 以间隙填充，就像img也标签有个空白间隙一样，解决的办法就是给table-cell加上：

于是我给列头加上

  .handsontable.ht_clone_top tr{
    line-height: 0;

  }
  .handsontable.ht_clone_top th{
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
  }
  .handsontable.ht_clone_top th .relative{
    vertical-align: middle;
    line-height: .9;
    font-size:14px;
  }

然而并没有起作用，既然别人说div有内容就正常了，所以，为了避免浏览器不出现table-cell的这个留白问题，我新增的列里面有内容就不会错位了

我感觉这个解决办法不是最佳的，只是找到了问题的原因，如果有更优解决方案，欢迎留言哦~

参考文献：https://segmentfault.com/q/1010000004715397

                http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/