数据表列没有响应？

Question

我正在使用数据表并且它工作正常，但是当我有大量的列时，列就会超出表限制。

正如您所看到的，当我添加更多列时，所有形状表都被销毁，我有40到50列根据需要显示，请告诉我如何修复它？

这是我的数据表代码：

$('#society-table').DataTable({
        retrieve: true,

        ajax: {
            url: '/FrontEnd/resources/getplots?id='+id,
            dataSrc: '' 
        },
        initComplete: function () {
            this.api().columns('.select-filter').every( function () {
                var that = this;
                $( 'input', this.footer() ).on( 'keyup change', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        },
        "columns": [
                    { "data": "id" },
                    { "data": "propertyNumber" },
                    { "data": "size" },
                    { "data": "balloted"},
                    { "data": "boundaryWall" },
                    { "data": "electricity" },
                    { "data": "file" },
                    { "data": "sewerage" },
                    { "data": "suiGas" },
                    { "data": "waterSupply" },
                    { "data": "communityCentre" },
                    { "data": "foodCourt" },
                    { "data": "securityStaff" },
                    { "data": "plotLaunchedDate" },
                    { "data": "price" },
                    { "data": "plotDimensions" },
                    { "data": "noofLanes" },
                    { "data": "roadSize" },
                    { "data": "plotFrontFace" },
                    { "data": "plotBack" },
                    { "data": "plotFront" },
                    { "data": "plotByLaws" },
                    { "data": "plotByLawsFile" },
                    { "data": "plotLocationPicture" },
                    { "data": "plotLocationPictureDate" },
                    { "data": "ownerName" },
                    { "data": "status.name" },
                    { "data": "type.name" },


              {
              "data": null,
              "className": "dt-center",
              searchable: false,

              orderable : false,
              render : function ( data, type, row, meta ) {
                  return '<a href="javascript:ShowPlotssFeaturesDetails('+row.id+', '+meta.row+')">Show Details</a>';
      } },
      { "data": "map_x_axis" },
      { "data": "squareFeet" },
      { "data": "urbanMarlaSize" },
      { "data": "ruralMarlaSize" },
      { "data": "address" },
                    {
                      "data": null,
                      "className": "dt-center",
                      searchable: false,
                      click: false, 
                      orderable : false,
                      render : function ( data, type, row, meta ) {
                      return '<a href="javascript:editPlot('+row.id+', '+meta.row+')">Edit</a> / <a href="javascript:removePlot('+row.id+', '+meta.row+')">Delete</a>';
                      } }
                   ] 
}

HTML：

<div id="societiestable" style="display:none; font-size: 11px; overflow:auto;">   
<table id="society-table" class="display" cellspacing="0" width="100%">
    <thead>
            <tr>
                <th>Id</th>
                <th class="select-filter">Plot No</th>
                <th class="select-filter">Size</th>
                <th class="select-filter">balloted</th>
                <th class="select-filter">Boundary Wall</th>
                <th class="select-filter">Electricity</th>
                <th class="select-filter">File Name</th>
                <th class="select-filter">Sewerage</th>
                <th class="select-filter">Sui Gas</th>
                <th class="select-filter">Water Supply</th>
                <th class="select-filter">Plot Category</th>
                <th class="select-filter">Food Court</th>
                <th class="select-filter">Security Staff</th>
                <th class="select-filter">Plot Launched</th>
                <th class="select-filter">Price</th>
                <th class="select-filter">Plot Dimensions</th>
                <th class="select-filter">No of lanes</th>
                <th class="select-filter">Road Size</th>
                <th class="select-filter">Plot Front Face</th>
                <th class="select-filter">Plot Back</th>
                <th class="select-filter">Plot Front</th>
                <th class="select-filter">Plot by laws</th>
                <th class="select-filter">Plot by laws file</th>
                <th class="select-filter">Plot location Picture</th>
                <th class="select-filter">Plot location Picture Date</th>
                <th class="select-filter">Owner</th>
                <th class="select-filter">Status</th>
                <th class="select-filter">Type</th>
                <th>Features</th>                
                <th>Map Position X_Y_axis</th>
                <th class="select-filter">Size in Square Feet</th>
                <th class="select-filter">Size in Urban Marla</th>
                <th class="select-filter">Size in Rural Marla</th>
                <th class="select-filter">Address</th>
                <th>Edit/Delete</th>
            </tr>
   </thead>
     <tfoot>
     <tr>
                <th>Id</th>
                <th>Plot No</th>
                <th>Size</th>
                <th>balloted</th>
                <th>Boundary Wall</th>
                <th>Electricity</th>
                <th>File Name</th>
                <th>Sewerage</th>
                <th>Sui Gas</th>
                <th>Water Supply</th>
                <th>Plot Category</th>
                <th>Food Court</th>
                <th>Security Staff</th>
                <th>Plot Launched</th>
                <th>Price</th>
                <th>Plot Dimensions</th>
                <th>No of lanes</th>
                <th>Road Size</th>
                <th>Plot Front Face</th>
                <th>Plot Back</th>
                <th>Plot Front</th>
                <th>Plot by laws</th>
                <th>Plot by laws file</th>
                <th>Plot location Picture</th>
                <th>Plot location Picture Date</th>
                <th>Owner</th>
                <th>Status</th>
                <th>Type</th>
                <th>Features</th>
                <th>Map Position X_Y_axis</th>   
                <th>Size in Square Feet</th>
                <th>Size in Urban Marla</th>
                <th>Size in Rural Marla</th>
                <th>Address</th>
                <th>Edit/Delete</th>
            </tr>
     </tfoot>
   <tbody>

   </tbody>

</table>
</div>

Answer 1

你是在谈论由红色箭头注释的页眉和页脚之间的空格差异吗？

如果是这样，那么html就没有完成。此外，必须有CSS样式。否则它永远不会像它那样。