Datatables styling issues with bootstrap (White background in black themes)

a.mercier

When using DataTables in combination with Bootstrap (or more specifically a dark themed style, for example one retrieved from Bootswatch) you might notice styling issues that are apparant such as a white background for your table which might not fit in your theme.

This is why I recommend removing the following lines from DataTables.min.css:

div.DTS div.dataTables_scrollBody{background:repeating-linear-gradient(45deg, #edeeff, #edeeff 10px, #fff 10px, #fff 20px)}

And

div.DTS div.dataTables_scrollBody table{background-color:white}

This is not a bug, per sé, just simply putting this out there for people who have experienced the same issues with Bootstrap usage.

Kind regards

nin_bound

I have seen a good convention in some boilerplate packages --- to create a separate style sheet and try to diffuse with inherit css rules. Call it datatables.app.css or something.

And then list it underneath the vendor's css file.

This helps in the event that you want to update your vendor css files.

a.mercier

That is probably an even better suggestion since you don't have to edit the datatables css every time an update comes out. Thanks!

allan

Yes, its a slightly tricky one this. I try to make sure I use rules which are going to interfear with themes too badly, but each theme is of course different and uses different styling. unfortunately, its virtually inevitable that some custom styling will be needed when using a theme.

Allan