DataTable Detail Rows JavaScript header doesn't align with body and issue when no items in the view

Dana

I have a Datatable with details, details having the same number of columns as the parent. It seems that the content and the header are not aligned not even if I use $('#example').DataTable().columns.adjust();. I've tried also using setTimeout but with the same result. Also, I've seen that where I don't have any items in the detail table and the message There are no items in this view. should appear, the column with the expand icon from parent increases when expanded and comes back to the same size when collapsed. I cannot figure out what am I doing wrong
Fiddle example: https://jsfiddle.net/5dukgqz9

kthorngren

You can make it an ul or something else. For example:
https://jsfiddle.net/mda6oy1t/

Kevin

Dana

Thanks Kevin (@kthorngren) for your answer. The only thing is that it solves only half of my problem The main one is regarding content and the header not being aligned (sometimes just the parent rows and sometimes also the detail table rows). Any ideas on what was I doing wrong?

kthorngren

Well, you can keep it as a td and use colspan=6 so it takes whole row:
https://jsfiddle.net/54u9etvx/

Kevin

Dana

@kthorngren I was referring to the rows with details, not empty ones, like the first row in my example. If you can see the one with TOTAL, it doesn't arrange with the header and neither the details for that row. I need something to fix the arrangement header-column

kthorngren

Are you saying you want to left justify the column headers to align with the column data? If so you can use the class dt-head-left as described here:
https://datatables.net/manual/styling/classes

I added cell-border to see what your table looks like.
https://jsfiddle.net/zxvkq0sc/

If left justify is not what you want then I'm not exactly sure what is misaligned.

Kevin

Dana

@kthorngren Thanks a lot for your help! I didn't think that will be this easier