当窗口最大化时，具有大量列的数据表与标题不同步

Question

我正在使用数据表，我尝试了很多东西，但它们都未能给我带来好的结果。

我有一个包含大量列的数据表，当我最大化窗口时，与表标题(标题(相比，右侧带有数据的列多了 30px。我看到如果窗口太大，那么与标题相比，数据会完全混乱，但是如果我得到一个较小的窗口，那么它似乎工作正常。

这是我的代码：

<div style="width: 98%;">
            <table id="activitiesTable" class="display table-bordered table-hover table-responsive">
                <thead>
                    <tr>
                      <th>Manager ID</th>
                      <th>Manager name</th>
                      <th>User ID</th>
                      <th>User name</th>
                      <th>Customer name</th>
                      <th>Project ID</th>
                      <th>Project name</th>
                      <th>Year</th>
                      <th>Jan</th>
                      <th>OTL</th>
                      <th>Feb</th>
                      <th>OTL</th>
                      <th>Mar</th>
                      <th>OTL</th>
                      <th>Apr</th>
                      <th>OTL</th>
                      <th>May</th>
                      <th>OTL</th>
                      <th>Jun</th>
                      <th>OTL</th>
                      <th>Jul</th>
                      <th>OTL</th>
                      <th>Aug</th>
                      <th>OTL</th>
                      <th>Sep</th>
                      <th>OTL</th>
                      <th>Oct</th>
                      <th>OTL</th>
                      <th>Nov</th>
                      <th>OTL</th>
                      <th>Dec</th>
                      <th>OTL</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                      <th>Manager ID</th>
                      <th>Manager name</th>
                      <th>User ID</th>
                      <th>User name</th>
                      <th>Customer name</th>
                      <th>Project ID</th>
                      <th>Project name</th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th></th>
                    </tr>
                </tfoot>
            </table>
          </div>

还有我的数据表的javascript：

activitiesTable = $('#activitiesTable').DataTable({
                scrollX: true,
                ajax: {
                        url: "{!! route('listOfActivitiesPerUserAjax') !!}",
                        type: "POST",
                        data: ajaxData,
                        dataType: "JSON"
                    },
                columns: [
                    { name: 'manager_id', data: 'manager_id' , searchable: false , visible: false},
                    { name: 'manager_name', data: 'manager_name', width: '150px' },
                    { name: 'user_id', data: 'user_id' , searchable: false , visible: false},
                    { name: 'user_name', data: 'user_name' , width: '150px'},
                    { name: 'customer_name', data: 'customer_name' , width: '200px'},
                    { name: 'project_id', data: 'project_id' , searchable: false , visible: false},
                    { name: 'project_name', data: 'project_name' , width: '150px'},
                    { name: 'year', data: 'year' , searchable: false , visible: false},
                    { name: 'jan_com', data: 'jan_com', width: '30px', searchable: false },
                    { name: 'jan_otl', data: 'jan_otl', width: '10px', searchable: false , visible: false},
                    { name: 'feb_com', data: 'feb_com', width: '30px', searchable: false },
                    { name: 'feb_otl', data: 'feb_otl', width: '10px', searchable: false , visible: false},
                    { name: 'mar_com', data: 'mar_com', width: '30px', searchable: false },
                    { name: 'mar_otl', data: 'mar_otl', width: '10px', searchable: false , visible: false},
                    { name: 'apr_com', data: 'apr_com', width: '30px', searchable: false },
                    { name: 'apr_otl', data: 'apr_otl', width: '10px', searchable: false , visible: false},
                    { name: 'may_com', data: 'may_com', width: '30px', searchable: false },
                    { name: 'may_otl', data: 'may_otl', width: '10px', searchable: false , visible: false},
                    { name: 'jun_com', data: 'jun_com', width: '30px', searchable: false },
                    { name: 'jun_otl', data: 'jun_otl', width: '10px', searchable: false , visible: false},
                    { name: 'jul_com', data: 'jul_com', width: '30px', searchable: false },
                    { name: 'jul_otl', data: 'jul_otl', width: '10px', searchable: false , visible: false},
                    { name: 'aug_com', data: 'aug_com', width: '30px', searchable: false },
                    { name: 'aug_otl', data: 'aug_otl', width: '10px', searchable: false , visible: false},
                    { name: 'sep_com', data: 'sep_com', width: '30px', searchable: false },
                    { name: 'sep_otl', data: 'sep_otl', width: '10px', searchable: false , visible: false},
                    { name: 'oct_com', data: 'oct_com', width: '30px', searchable: false },
                    { name: 'oct_otl', data: 'oct_otl', width: '10px', searchable: false , visible: false},
                    { name: 'nov_com', data: 'nov_com', width: '30px', searchable: false },
                    { name: 'nov_otl', data: 'nov_otl', width: '10px', searchable: false , visible: false},
                    { name: 'dec_com', data: 'dec_com', width: '30px', searchable: false },
                    { name: 'dec_otl', data: 'dec_otl', width: '10px', searchable: false , visible: false}
                    ],
                order: [[2, 'asc']],
                initComplete: function () {
                    var columns = this.api().init().columns;
                    this.api().columns().every(function () {
                        var column = this;
                        // this will get us the index of the column
                        index = column[0][0];
                        //console.log(columns[index].searchable);
                        // Now we need to skip the column if it is not searchable and we return true, meaning we go to next iteration
                        if (columns[index].searchable == false) {
                          return true;
                        }
                        else {
                          var input = document.createElement("input");
                          $(input).appendTo($(column.footer()).empty())
                          .on('keyup change', function () {
                              column.search($(this).val(), false, false, true).draw();
                          });
                        }
                    });
                },
                rowCallback: function(row, data, index){
                  if(data.jan_com<= 0){
                      $(row).find('td:eq(4)').addClass('zero');
                  }
                  else if(data.jan_otl> 0){
                      $(row).find('td:eq(4)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(4)').addClass('forecast');
                  }
                  if(data.feb_com<= 0){
                      $(row).find('td:eq(5)').addClass('zero');
                  }
                  else if(data.feb_otl> 0){
                      $(row).find('td:eq(5)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(5)').addClass('forecast');
                  }
                  if(data.mar_com<= 0){
                      $(row).find('td:eq(6)').addClass('zero');
                  }
                  else if(data.mar_otl> 0){
                      $(row).find('td:eq(6)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(6)').addClass('forecast');
                  }
                  if(data.apr_com<= 0){
                      $(row).find('td:eq(7)').addClass('zero');
                  }
                  else if(data.apr_otl> 0){
                      $(row).find('td:eq(7)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(7)').addClass('forecast');
                  }
                  if(data.may_com<= 0){
                      $(row).find('td:eq(8)').addClass('zero');
                  }
                  else if(data.may_otl> 0){
                      $(row).find('td:eq(8)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(8)').addClass('forecast');
                  }
                  if(data.jun_com<= 0){
                      $(row).find('td:eq(9)').addClass('zero');
                  }
                  else if(data.jun_otl> 0){
                      $(row).find('td:eq(9)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(9)').addClass('forecast');
                  }
                  if(data.jul_com<= 0){
                      $(row).find('td:eq(10)').addClass('zero');
                  }
                  else if(data.jul_otl> 0){
                      $(row).find('td:eq(10)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(10)').addClass('forecast');
                  }
                  if(data.aug_com<= 0){
                      $(row).find('td:eq(11)').addClass('zero');
                  }
                  else if(data.aug_otl> 0){
                      $(row).find('td:eq(11)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(11)').addClass('forecast');
                  }
                  if(data.sep_com<= 0){
                      $(row).find('td:eq(12)').addClass('zero');
                  }
                  else if(data.sep_otl> 0){
                      $(row).find('td:eq(12)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(12)').addClass('forecast');
                  }
                  if(data.oct_com<= 0){
                      $(row).find('td:eq(13)').addClass('zero');
                  }
                  else if(data.oct_otl> 0){
                      $(row).find('td:eq(13)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(13)').addClass('forecast');
                  }
                  if(data.nov_com<= 0){
                      $(row).find('td:eq(14)').addClass('zero');
                  }
                  else if(data.nov_otl> 0){
                      $(row).find('td:eq(14)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(14)').addClass('forecast');
                  }
                  if(data.dec_com<= 0){
                      $(row).find('td:eq(15)').addClass('zero');
                  }
                  else if(data.dec_otl> 0){
                      $(row).find('td:eq(15)').addClass('otl');
                  }
                  else {
                    $(row).find('td:eq(15)').addClass('forecast');
                  }
                }
            });

Answer 1

我设法通过在末尾添加一列并使其没有任何宽度来使其工作，以便表格可以自行调整。

我在最后补充了：

{
                        name: 'actions',
                        data: null,
                        sortable: false,
                        searchable: false,
                        render: function (data) {
                            var actions = '';
                            return actions;
                        }
                    }

这个没有宽度参数，我认为这有助于它适应屏幕的能力。