Data tables header width/alignment issue

Question

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.

Can you add some sample HTML of your table (with headers and some actual rows)? — Jacob Mattison
– Jacob Mattison, Commented Mar 20, 2013 at 15:00
I believe I see a scrollbar for the table body. I wonder if that factors in. Also, to facilitate the scrollbar, is the "header" actually a separate table from the table itself (whether by your code explicitly or as an "automagic" feature of the API)? Even when specified as pixel values, column widths are always subject to adjustment by the browser, so it's kind of a craps shoot putting tables on top of one-another and hoping they'll line up. — Greg Pettit
– Greg Pettit, Commented Mar 20, 2013 at 15:07
I found that by adding border collapse to the header table, it solved the issue. — Justin
– Justin, Commented Mar 20, 2013 at 16:26

Justin · Accepted Answer · 2013-03-20 16:33:55Z

1

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.

answered Mar 20, 2013 at 16:33

Justin

6,57911 gold badges50 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Data tables header width/alignment issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related