带有数据表的复杂表头

【问题标题】：Complex Header with datatables带有数据表的复杂表头
【发布时间】：2016-10-11 17:51:42
【问题描述】：

我正在使用不滚动的数据表 FixedHeader 扩展。复杂标题的列（具有行跨度和列跨度的标题）未正确对齐。请参阅图片和 codepen 示例。

$(document).ready(function() {
  $('#example').DataTable({
    "paging": false,
    "ordering": false,
    "info": false,
    "searching": false,
     fixedHeader: {
     header: true,
     footer: true
     },
   });
 });

关于如何解决这个问题的任何想法？

Codepen example

【问题讨论】：

标签： datatables

【解决方案1】：

请给出每个列的列宽。这将解决问题。

<colgroup>
   <col width="20%" />
   <col width="15%" />
   <col width="15%" />
   <col width="15%" />
   <col width="15%" />
   <col width="15%" />
</colgroup>

【讨论】：

感谢 Aneesh 的建议。当视口的宽度大约为 1330 像素或更宽时，它绝对有效。在较窄的视口中，跨越 3 个单元格的标题下方的列仍然未对齐。
这是一个新的 [codepen]，它显示了我的意思：(codepen.io/135679/pen/zKadJa)