Установить мульти заголовок, замороженный столбец и фиксированный заголовок с помощью jquery datatables

Question

У меня есть вопрос о таблицах данных jquery.

В моей таблице используется многозаголовок, и первый столбец 4 должен быть заблокирован.

у меня всего 25 столбцов, вот пример моей таблицы:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="tabel_daftar_all" align="center" style="text-align: center;">
        <thead>
            <tr>
                <!--<th rowspan="4">No</th>-->
                <th rowspan="4">Categories1</th>
                <th colspan="3">Categories2</th>
                <th colspan="14">Categories3</th>
                <th colspan="5">Categories4</th>
                <th rowspan="4">Remark</th>
            </tr>
            <tr>
                <th rowspan="3">X</th>
                <th rowspan="3">X 1</th>
                <th rowspan="3">X 2</th>
                <th colspan="3">X</th>
                <th rowspan="3">X</th>
                <th colspan="3">X</th>
                <th rowspan="3">X</th>
                <th colspan="6">X</th>
                <th colspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                </tr>
                <tr>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th rowspan="2">X</th>
                <th>X</th>
                <th>X</th>
                <th colspan="2">X</th>
                <th>X</th>
                <th>X</th>
            </tr>

            <tr>
                <th>Y/N</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
                <th>X</th>
            </tr>
        </thead>
        <tbody>
            <!--PHP select from database-->
        </tbody>
</table>

когда я пытаюсь установить только 1 столбец, это был успех,

однако, когда я изменяю его на 4, у меня возникают некоторые проблемы,

почему стиль верхнего заголовка с многострочным заголовком в замороженном столбце кажется другим,

вот скриншот:

Кроме того, в Firefox ряды, кажется, тоже сфальсифицированы

Скриншот:

Мало того, я тоже хочу использовать фиксированный заголовок, но он кажется неподдерживаемым в режиме прокрутки, есть ли решение для этого тоже?

что касается сценария моих таблиц данных здесь:

<script type="text/javascript" charset="utf-8">
$(document).ready( function () {

//Auto column resize for datatable inside tab
    $("#kontenTab").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    var oTable = $('#tabel_daftar_all').dataTable( {
        "bJQueryUI": true,
        "bSort": false,
        "bPaginate": false,
        "sScrollX": "100%",
        //"sScrollXInner": "150%",
        "bScrollCollapse": true,
        "bFilter": false
    } );    

    new FixedColumns( oTable, {
        "iLeftColumns": 4
    } );

    //new FixedHeader( oTable );
} );
</script>
<style>
table.display thead th {
    border-bottom: 1px solid black;
    cursor: pointer;
    font-weight: bold;
    padding: 3px 18px 3px 10px;
}
</style>

извините, если я спрошу слишком много,

Я надеюсь, что кто-нибудь может помочь мне решить эту проблему XD