Блог

Я использую таблицу данных для отображения данных на моей HTML-странице. Проблема в том, что мой заголовок datatable не полностью выровнен с моим tbody.

Мой код с данными выглядит следующим образом:

 $('#dataTable1').DataTable( {
        "scrollY": "400px",
        "scrollX": "100%",
        "scrollCollapse": true,
        "paging": false,
        bSort : false,
        bFilter : false,
        info : false,
        fixedHeader: true,
         fixedColumns:   {
            leftColumns: 2,
        } 
    }).columns.adjust().draw();
 

МОЙ HTML-код выглядит следующим образом:

 <div id="dataDiv1" style="width: 1100px; overflow: scroll;">
            <table id="dataTable1"  class="cell-border">
                <thead>
                    <tr>
                        <th rowspan="2">Group</th>
                        <th rowspan="2">Voltage</th>
                        <c:forEach items="${searchedMaster.salesReportVo.salesDetailsMap}" var="years"> 
                            <th colspan="3">FY ${years.key} </th>
                        </c:forEach>
                    </tr>
                    <tr>
                        <c:forEach items="${searchedMaster.salesReportVo.salesDetailsMap}" var="years"> 
                            <th>Consumer</th>
                            <th>Load</th>
                            <th>Sales</th>
                        </c:forEach>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach items="${searchedMaster.salesReportVo.groupNameList}" var="catList" varStatus="loop">
                        <tr>
                            <th>${catList}</th> 
                            <th>${searchedMaster.salesReportVo.voltageList[loop.index]}</th>
                            <c:forEach items="${searchedMaster.salesReportVo.salesDetailsMap}" var="salesMap">
                                <td>
                                    <fmt:formatNumber type = "number" maxFractionDigits = "2" value = "${salesMap.value[loop.index].consumer}" />
                                </td>
                                <td>
                                    <fmt:formatNumber type = "number" maxFractionDigits = "2" value = "${salesMap.value[loop.index].load}" />
                                </td>
                                <td>
                                    <fmt:formatNumber type = "number" maxFractionDigits = "2" value = "${salesMap.value[loop.index].sales}" />
                                </td>
                            </c:forEach>
                        </tr>
                    </c:forEach>
                    
                </tbody>
            </table>
        </div>  
 

Пожалуйста, помогите мне. Заранее спасибо.