データテーブルを持つ複合ヘッダー

Question

私はスクロールせずにdatatable FixedHeader拡張を使用しています。 複合ヘッダーの列（rowspanとcolspanのヘッダー）が正しく整列しません。 画像とコードサンプルを参照してください。

Pictures

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

この問題を解決する方法上の任意のアイデア？

Codepen example

Answer 1

各colsのためのcolum幅をお願いします。それが問題を解決します。

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