Remove horizontal scrollbar under fixed columns DataTables

Question

I'm combining a complex header and fixed columns: 1) complex header: https://datatables.net/examples/basic_init/complex_header.html 2) fixed columns: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html It works fine but is there a way to remove the scrollbar from the fixed header columns? I've outlined the bit I'd like to remove.

Basically, I want to make it like this: https://jsfiddle.net/brianlmerritt/8c5jgs4b/ but with DataTables and complex header. Here's my own fiddle: https://jsfiddle.net/omgLswq6/151/

 $(document).ready(function () {
     $('#compareResults').DataTable({
         paging: false,
         ordering: false,
         info: false,
         scrollX: true,
         fixedColumns: {
             leftColumns: 5
         }
     });
 });

Still need help with this.

user3375388
– user3375388

2018-08-27 13:55:31 +00:00
Commented Aug 27, 2018 at 13:55 — user3375388
– user3375388, Commented Aug 27, 2018 at 13:55

freepedaler · Accepted Answer · 2018-11-02 20:32:20Z

4

I was able to resolve this by changing the overflow style to be hidden in the fixed left column container:

.DTFC_LeftBodyLiner {
  overflow: hidden;
}

<div class="DTFC_LeftBodyLiner">
  <table class="foo_datatable">
    ...
  </table>
</div>

answered Nov 2, 2018 at 20:32

freepedaler

413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove horizontal scrollbar under fixed columns DataTables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related