echarts中折线图或者柱状图切换为数据视图（表格布局）表头无法对齐解决方法

$\color{#6495ed}{在使用echarts做柱状图的过程中。发现点击数据视图的时候,}$ $\color{#6495ed}{表头和数据无法对齐。样式如下:}$

$\color{#6495ed}{于是我重新写了dataView,将其做成table表格的样式,效果如下图:}$

$\color{#6495ed}{代码如下:}$

dataView: {
  show: true,
  readOnly: true,
  optionToContent: function (opt) {
  //该函数可以自定义列表为table，opt是给我们提供的原始数据的obj。 可打印出来数据结构查看
  var axisData = opt.xAxis[0].data; //坐标轴
  var series = opt.series; //折线图的数据
  var tdHeads ='<td  style="margin-top:10px; padding: 10px 15px">状态</td>'; //表头
  var tdBodys = "";
  series.forEach(function (item) {
  tdHeads += `<td style="padding:5px 15px">${item.name}</td>`;});
  var table = `<table border="0" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>${tdHeads} </tr>`;
  for (var i = 0, l = axisData.length; i < l; i++) {
  for (var j = 0; j < series.length; j++) {
  if (series[j].data[i] == undefined) {
  tdBodys += `<td>${"-"}</td>`;
   } else {
  tdBodys += `<td>${series[j].data[i]}</td>`;
  }
   }
  table += `<tr><td style="padding: 15px 20px">${axisData[i]}</td>${tdBodys}</tr>`;
  tdBodys = "";}
  table += "</tbody></table>";
      return table;
              },
        contentToOption: function (HTMLDomElement, opt) {
           return opt;
              },
            },