Width Styling & xScroll

wallabe123

I am trying to add a horizontal scroll bar to my DataTable as it is too wide for the container it is in.
I have set the width to 100% and added the scrollX configuration option in. The scroll bar still isn't showing.
<table id="example-table" class="compact hover" width="100%">
$('#example-table').DataTable({ dom: 'frti', scrollY: "500px", scrollX:true, pageLength :-1, })

When I look in the developer tools of the browser it shows that the 'width = 100%' has been ignored.

Could this be why the horizontal scroll bar isn't working, and if so how do I make it recognize the width.

kthorngren

Could this be why the horizontal scroll bar isn't working, and if so how do I make it recognize the width.

Looking at this example I see the same thing as your screenshot. I would suspect that this is expected with scrolling enabled.

What happens with the table display? Does it extend past the container width?

We will need to see the issue to help debug styling issues. Please post a link to your page or a test case replicating the issue so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

wallabe123

@kthorngren thanks for your reply, I've since realized it was inheriting a hidden scroll-x attribute from a global class. Here's hoping the brain switches on for the rest of the week! Thanks again.

allan

Without a test case, it is hard to say for sure, but my guess is that the browser is able to collapse the table down to fit in the space available and therefore does so (it will always try to make a table fit the space available).

Add white-space: nowrap; to your styles for the table cells to see if that is the issue (if you are using our CSS then you can add a nowrap class to the table to do that).

If that doesn't resolve it, please link to a test case showing the issue.

Allan

allan

Hah - beaten to it by Kevin again!