标头错位

Question

我有一个jQuery DataTables的问题，问题是当一个表有水平滚动条，并且数据表的宽度增加时，那么数据表的标题与数据正文没有正确对齐表

这是调整宽度之前的数据表，这是正常的：

这是调整宽度后的数据表，它有未对齐的标题：

以下是我使用的代码，它位于ASP.NET中：

             <div Class="dataTable_wrapper">
            <Table Class="table table-striped table-bordered table-hover" id="dataTables-UserProfiles">
                <thead>
                    <tr>
                        <th Class="text-center" style="white-space: nowrap">User Id</th>
                        <th Class="text-center" style="white-space: nowrap">Full Name</th>
                        <th Class="text-center" style="white-space: nowrap">Phone Number</th>
                        <th Class="text-center" style="white-space: nowrap">Email Address</th>
                        <th Class="text-center" style="white-space: nowrap">Branch Code</th>
                        <th Class="text-center" style="white-space: nowrap">Account Locked</th>
                        <th Class="text-center" style="white-space: nowrap">Account Status</th>
                        <th width="80" Class="text-center">Amend</th>
                     </tr>
                </thead>
                <tbody>

                   <% For i As Integer = 0 To ALUserProfiles.Count - 1%> 
                         <% Response.Write("<tr Class=""odd gradeX"">")%> 
                         <% Response.Write("    <td style=""white-space: nowrap""><b>" & ALUserProfiles(i).UserId & "</b></td>")%> 
                         <% Response.Write("    <td style=""white-space: nowrap"">" & ALUserProfiles(i).UserFullName & "</td>")%> 
                         <% Response.Write("    <td style=""white-space: nowrap"">" & ALUserProfiles(i).UserPhoneNumber & "</td>")%> 
                         <% Response.Write("    <td style=""white-space: nowrap"">" & ALUserProfiles(i).UserEmailAddress & "</td>")%> 
                         <% Response.Write("    <td style=""white-space: nowrap"">" & ALUserProfiles(i).UserBranchCode & "</td>")%> 
                         <% Response.Write("    <td Class=""text-center"" style=""white-space: nowrap"">" & IsAccountLockedOut(ALUserProfiles(i)) & "</td>")%> 
                         <% Response.Write("    <td Class=""text-center"" style=""white-space: nowrap"">" & ALUserProfiles(i).AccountStatus & "</td>")%> 
                         <% Response.Write("    <td Class=""text-center""><a class=""btn btn-info"" href=""AmendUserProfile.aspx?UserId=" & ALUserProfiles(i).UserId & """ role=""button"">Amend</a></td>")%> 
                         <% Response.Write("</tr>")%> 
                    <% Next%>

                </tbody>
            </Table>
        </div>

JavaScript的：

$(document).ready(function () {
    $('#dataTables-UserProfiles').DataTable({
        responsive: true,
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        "bInfo": false,
        "order": [[1, "asc"]]
    });
});

Answer 1

我有类似的问题。启用scrollX时，我无法响应工作。如果可能，请尝试将scrollX设置为false。然后你可能需要调用columns.adjust（）以及response.recalc（）。

$(document).ready(function () {
    yourDataTable = $('#dataTables-UserProfiles').DataTable({
        responsive: true,
        scrollX: false,
        scrollCollapse: true,
        paging: false,
        "bInfo": false,
        "order": [[1, "asc"]]
    });
}).columns.adjust().responsive.recalc();

$(window).resize(function() {
    yourDataTable.columns.adjust().responsive.recalc();
});