Possible column width bug when using multiple table headers

Possible column width bug when using multiple table headers

anthonysanthonys Posts: 19Questions: 4Answers: 0

I think this might be a bug, although correct me if it's a dev error.

When you have a table with two rows of <th> column headers, datatables applies its column widths to the second of the two. You need to set column widths on the first line of the table for them to be effective.

Example: http://live.datatables.net/dejudaso/5
In the example the second column stays at 30px as it has the width set on the first row of <th> tags. Datatables sets its 30px width (aimed at the first col - col 0) on the second row of <th> tags, which is ineffective. If you delete one of the <thead> sets of <th> tags, datatable's width allocations become effective again.

I've tested in latest Chrome and IE. I think the issue is still there without "table-layout: fixed", but is easier to see on a fixed layout.

Replies

  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin

    Interesting! This must be related to how the browser uses table-layout: fixed. Perhaps it is only using widths from the first cell and ignoring all others. Normally this wouldn't be an issue since a width applied to any of the cells in a column should be propagated to all, but it appears not so in this case. I'll need to dig into how a fixed table layout actually works.

    In the mean time a little workaround is to have DataTables use the top cells which you can do using orderCellsTop: http://live.datatables.net/dejudaso/6/edit .

    Allan

  • anthonysanthonys Posts: 19Questions: 4Answers: 0

    Thanks, the workaround works well. And both Datatables and Editor are amazing - great functionality, great documentation.

This discussion has been closed.