Keep column width with child row
Keep column width with child row

Hi Guys,
my DataTable uses child rows to display additional data. My supervisor wants to have the child row information align with the parent row columns, so I formatted the child row as a row and not a single column (The format() function returns a jQuery <tr> now).
The problem is that the child row content is sometimes wider and changes the column widths of the whole table which is inacceptable to us.
I am also a bit overwhelmed by the different width options of datatables. autoWidth, percentage or pixel and so on.
To make it even more complicated, the table of course needs to fit to different screen sizes (not mobile or tablet for now).
http://live.datatables.net/tipugiju/2/edit
Best regards
Seb
Answers
Hi @sebfd ,
In that example, you had the class
nowrap
on the table - if you remove it, see here, it looks like it's doing what you want.Cheers,
Colin
hi @colin ,
thanks for your reply. On my project I dont use class nowrap and it unfortunately only helps in this test-fiddle I posted. When the child content gets longer, the column widths still change, see:
http://live.datatables.net/tipugiju/4/edit
This here has CSS in
break-word
. Seems better.Thanks alot, @colin . Break-word was a good hint. The task is still complicated and ugly as hell, but I can handle it, thanks to you.
Have a good day!