Fine control on CSS to make DT tight and condensed

kmansoor

I'm working with v1.10 with Bootstrap. I need to make the table really tight, even with bootstrap .table-condensed it does not do it. What route should one take?

Should I use firebug and inspect each element to see what CSS class(es) are in use and then try to tweak?
This sounds beyond my skills, I wonder if there is a for-css-challenged-guys way to achieve this?

Thanks.

allan

Should I use firebug and inspect each element to see what CSS class(es) are in use and then try to tweak?

Yup - I'd suggest that's possibly the best way if you are using Bootstrap. They do publish in their documentation the markup structure and classes, but using your browser's developer tools will be just as quick, if not quicker.

Simply pick a table cell, right click and "Inspect element". The dev tools will show you the CSS applied to the cell, including padding information (which I suspect will be what you want here) allowing you to create a custom rule with that information.

Give it a go - I'd be willing to bet its well with in your abilities! :-)

Allan

kmansoor

Okay great.
Thank you.

benwilson

Hi Allen,
I have been doing exactly this and tweaking the JQueryUI styling css file. I had the thought that it might be cleaner if there could be a second css file that your code looks for and applies (if found), that would override the supplied one. This way, all my tweaks would be in their own file, and thus updates in the supplied css file would not need to be merged with my tweaks.

I have tried simply adding my tweaks into a separate file, but in some cases, the styles cannot be overridden.

Thanks,
-Ben

allan

Hi Ben,

Are you referring to the SCSS files? That sounds like quite a good idea - thanks for the suggestion.

Allan

benwilson

Allan,

No, I am just using the css file from here:
https://github.com/DataTables/Plugins/blob/master/integration/jqueryui/dataTables.jqueryui.css

Apologies for misspelling your name earlier.

-Ben

allan

I'm thinking I might add a condensed option to the list to class name "features" that the DataTables stylesheets offer...

Apologies for misspelling your name earlier.

Hah - no worries! Hadn't actually noticed ;-)

Allan