jQuery datatable + Twitter bootstrap CSS issue

Question

I am having a very strange problem with the styling of the table that has attached jquery datatable on it. Can someone help me with this one? I put the page here:

http://aldee07.eu5.org/test/

PS: for the link above, please just ignore the javascript error and malfunction of the scripts. I am just concern with the CSS of that page.

Thank you very much in advance. I am really stuck with this problem.

Answer 1

Your problem stems from bootstrap css sets input to default width of 260px which is too much for your table columns and is causing columns to be wider than script is telling them to be

This is not the 100% css cure but will show you the path to create a more robust css rule(s) to over ride the defaults.

After all the css link tags add the following:

<style type="text/css">
    input { width: 85%} 
</style>

Your table will shrink to fit parent and you just need to write some css improvements for the header input tags and perhaps <TH> padding . I would add a special class to row with the input elements and work from there. Also bootsrap API has different classes for size of input

DEMO: http://jsfiddle.net/PSvyz/