Jquery DataTable after adding scrolling function, Column footer does not align with its data column

polachan

I am trying to show the table footer in the same column position of its data column along with its Vertical scrolling. Data table is showed with fixed column header. I am looking for some one help to fix the code. Now the footer is showed bit far from its data column. Here is my code

<div>
<table id="myTable" class="table table-bordered table-striped" style="width:100%;font-size:90%">
 <thead>
  <tr>
    <th>
       Item
    </th>
    <th>
       Net Value
    </th>
    <th>
       Total Value
    </th>
  </tr>
 </thead>
 <tbody>
   <tr>
      <td>AAA</td>
      <td>200.00</td>
      <td>300.00</td>
      <td>BBB</td>
      <td>300.00</td>
      <td>200.00</td>
   </tr>
 </tbody>
 <tfoot>
    <tr>
       <th>Total</th>
       <td>First Total</td>
       <td>Second Total</td>
    </tr>
</tfoot>
</table>
</div>
<script>
 $(document).ready(function () {
 var table = $('#myTable').DataTable({
     "pageLength": 40,
      scrollY: "500px",
      scrollCollapse: true,
      scrollX: true,
      paging: true,
      dom: 'Bfrtip',
      buttons: [
                { extend: 'copyHtml5', footer: true },
                { extend: 'excelHtml5', footer: true },
                { extend: 'csvHtml5', footer: true },
                { extend: 'pdfHtml5', footer: true }
            ]
 });
table.columns.adjust().draw();
})
</script>

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

allan

One think I just spotted what that your table header and footer have 3 columns, but the body has 6 columns. That should throw an error as your table does here: https://live.datatables.net/tidehufo/1/edit .

Allan