CODEWITHSUNDEEP
jquerygoogle-chromedatatablescss
Justin
Justin

Reputation: 6549

Data tables header width/alignment issue

I am having a problem with the data tables jquery plugin where my headers are not aligning properly with the table. I noticed that if I add cellspacing=0 to the table it will align correctly. However, this attribute isn't supposed in HTML5 and I would like this to work in HTML5 as well if possible. If you look at the dotted border lines, the header ones do to match the content table lines.

Here is the javascript I am using to create the table.

myTableHere = $('#MyTableHere').dataTable({
    'sScrollY': '100px',
    'bPaginate': false,
    'bScrollCollapse': true,
    'bFilter': false,
    'bInfo': false,
    'bSort': false,
    "aoColumns": [
        { "sWidth": "95px" },
        { "sWidth": "267px" },
        { "sWidth": "77px" },
        { "sWidth": "90px" },
        { "sWidth": "90px" },
        { "sWidth": "42px" }
    ]
});

This is being viewed in the latest version of chrome. enter image description here

Here is some sample HTML before I data tablefy it. https://gist.github.com/anonymous/d44360d3a06c1a5b2898

Edit: I found that by adding border collapse to the header table, it solved the issue.

Upvotes: 2

Views: 6280

Answers (1)

Justin
Justin

Reputation: 6549

On the table that I was using the data tables plugin on, I had a the border-collapse: collapse; css property applied to it. This property was still being applied to the content table after the plugin had finished tablfying my table. However, the seperate header table did not have this css property applied to it as well. After setting the header table to also be border collapse, the lines lined up properly.

Upvotes: 1

Related Questions