数据表固定标题不向左或向右滚动

Question

我有一个带有固定列标题的数据表。当我上下滚动时，固定列标题正常工作。但是，当我左右滚动时，固定的列标题没有跟随，它与<tbody> 未对齐。无论如何可以告诉我我的代码有什么问题吗？以下是我的代码：

CSS：

table {
  margin: 1em 0;
  border: 0.2em solid #d6d6d6;
  border-collapse: collapse;
  width:100%;
}

th,
td {
  padding:3px;
  vertical-align: text-top;
  text-align: left;
  text-indent: -0.5em;
  border: 0.3em solid #d6d6d6;
}

.name_col {
    text-align:left;
}

th {
  vertical-align: bottom;
  background-color: #708090;
  color: #fff;
  font-size:13px;
  text-align:center;
}

td {
    font-size:12px;
    text-align:center;
}

表格：

    <table id="pic_table" class="table" class="display">
        <thead>
            <tr>
                <th class="filterhead"></th>
                <th class="filterhead"></th>
                <th class="filterhead"></th>
                <th class="filterhead"></th>
                <th class="filterhead"></th>
                <th class="filterhead"></th>
                <th class="filterhead"></th>
            </tr>
            <tr>
                <th>Serial</th>
                <th>Name</th>
                <th>Project Reference</th>
                <th>Basic Profile</th>
                <th>Employment Permits</th>                 
                <th>Last Updated</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <?php
             ..............
             while($row = sqlsrv_fetch_array( $sql_stmt, SQLSRV_FETCH_NUMERIC)){
                 
                 $row_num = $row[0];
                 $name = $row[1];
                 $update_date = $row[2]->format("d-M-y");
                 $pr_stats = intval($row[3]);
                 $bp_stats = intval($row[4]);
                 $ep_stats = intval($row[5]);
                 $total = $pr_stats+$bp_stats+$ep_stats;
                 
                 if($total < 300){                       
                     $status = "<td style='background:#FFA07A;'>Incomplete</td>";                            
                 }else{
                     $status = "<td style='background:#90EE90;'>Complete</td>";
                 }
                 
                echo"<tr>";
                echo "<td>".$row_num."</td>";
                echo "<td class='name_col'>".$name."</td>";
                echo "<td>".$pr_stats."%</td>"; 
                echo "<td>".$bp_stats."%</td>";
                echo "<td>".$ep_stats."%</td>";                     
                echo "<td>".$update_date."</td>";
                echo $status;
                echo "</tr>";
                
             }
            ?>
        </tbody>
    </table>

JS：

$('#pic_table').DataTable({

        "dom": "<'row'<'col-md-6'Bi><'col-md-6'fp>>" +
        "<'row'<'col-md-12't>>"+
        "<'row'<'col-md-6'il><'col-md-6'p>>",
        responsive: true,   
        fixedHeader:  {
                    header: true,
                    footer: true,
                    headerOffset: 50
                },
        initComplete: function () {

                var i = 0;
                        this.api().columns().every( function () {
                            var column = this;
                            var select = $('<select><option value="">All</option></select>')
                                .appendTo( $('.filterhead').eq(i).empty() )
                                .on( 'change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );
                 
                                    column
                                        .search( val ? '^'+val+'$' : '', true, false )
                                        .draw();
                                } );
                 
                            column.data().unique().sort().each( function ( d, j ) {
                                select.append( '<option value="'+d+'">'+d+'</option>' )
                            } );
                            i++;
                        } );        
        }
        
    }); 

错误截图：

Answer 1

设法自己解决。是因为我的 css 包装器中的溢出-x

 #wrapper {
    overflow-x: auto; /****To remove*****/
 }