echarts中折線圖切換為數據視圖（表格布局）表頭無法對齊解決方法

            dataView: {

              show: true,

              readOnly: true,

              optionToContent: function (opt) {

　　　　  // console.log(opt) 

                //該函數可以自定義列表為table，opt是給我們提供的原始數據的obj。 可打印出來數據結構查看

                var axisData = opt.xAxis[0].data; //坐標軸

                var series = opt.series; //折線圖的數據

                var tdHeads =

                  '<td  style="margin-top:10px; padding: 0 15px">日期</td>'; //表頭

                var tdBodys = "";

                series.forEach(function (item) {

                  tdHeads += `<td style="padding:5px 15px">${item.name}</td>`;

                });

                var table = `<table border="1" 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: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`;

                  tdBodys = "";

                }

                table += "</tbody></table>";

                return table;

              },

              contentToOption: function (HTMLDomElement, opt) {

                return opt;

              },

            },