table动态表头怎么合并

如果您想要合并table的动态表头，需要使用 JavaScript 和 CSS 来实现。下面是一个示例代码，可以帮助您实现此功能：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th rowspan="2">商品名</th>
      <th colspan="3">2018年</th>
      <th colspan="3">2019年</th>
    </tr>
    <tr>
      <th>Q1</th>
      <th>Q2</th>
      <th>Q3</th>
      <th>Q1</th>
      <th>Q2</th>
      <th>Q3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品1</td>
      <td>100</td>
      <td>200</td>
      <td>300</td>
      <td>400</td>
      <td>500</td>
      <td>600</td>
    </tr>
    <tr>
      <td>商品2</td>
      <td>200</td>
      <td>300</td>
      <td>400</td>
      <td>500</td>
      <td>600</td>
      <td>700</td>
    </tr>
  </tbody>
</table>

CSS 代码：

#myTable th {
  background-color: #f2f2f2;
  text-align: center;
  vertical-align: middle;
}
#myTable th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

JavaScript 代码：

// 获取表头单元格元素
var headerCell = document.querySelector('#myTable thead tr:first-child th');

// 获取表格单元格元素
var cells = document.querySelectorAll('#myTable td:first-child');

// 获取表头单元格高度
var headerHeight = headerCell.offsetHeight;

// 遍历表格单元格元素
for (var i = 0; i < cells.length; i++) {
  var cell = cells[i];

  // 给表格单元格添加样式
  cell.style.position = 'sticky';
  cell.style.left = '0';
  cell.style.zIndex = '0';
  cell.style.top = headerHeight + 'px';
}

这段 JavaScript 代码的作用是将表格的第一列单元格与表头的第一列单元格进行合并，并将表格的第一列单元格设置为 sticky 定位，这样当您滚动表格时，第一列单元格会保持在屏幕上方。