Hiding columns and having scrollX

ccauchi

Hi all,

I am new to datatables but i starting liking them since very flexible to use.

I have created a datatable with "scrollX": "100%" i have hidden a column using ": [ { "targets": 0, "orderable": false, "visible": false },...]

For some reason or another, the column's width gets distorted and the header columns are not aligned with the body columns. But when i removed the "scrollX": "100%", the columns took the full width of the table and the header columns are not aligned with the body columns.

Is this a bug or there is an explanation about this?

Thanks in advance

jr42.gordon

Do the number of columns in the body match number in header? What version of DataTables are you using? In DataTables 1.10, "scrollX" takes a boolean value.

However, there are a number of things you can go.

Add following to table DOM

cellpadding="0" cellspacing="0" border="0"

Add following to .DataTable() init

"autoWidth"         : false,

Make sure your th & td DOM elements "box-sizing" match following

table.dataTable {
        thead, tbody {
            th,td {
                -webkit-box-sizing: content-box;
                -moz-box-sizing: content-box;
                box-sizing: content-box;
            }
        }
}

This last one is optional and only worth a shot if you still haven't fixed your issue. Add following to .DataTable() init

"responsive"        : false,

glenderson

scrollX is a Boolean, it's either true or false.
You want to change the width, mostly likely in the table element style.

ccauchi

"autoWidth" : false
did the trick.

changing scrollX to a boolean, wasn't so effective but i changed it just in case :)

thank you guys