CODEWITHSUNDEEP
htmlcssajaxdatatablesdatatables-1.10
Sebastien Dionne
Sebastien Dionne

Reputation: 776

DataTables nested table with collapse : how remove padding?

I created a demo to play with Datatables to have child row with Collapse/Expands. I'm not able to align the nested table within the parent. I'll like to have the same columns width.

You can see the JSFiddle here enter link description here

I try to add this but it didn't work.

.childtable.dataTable tbody th, .childtable.dataTable tbody td {
    padding: 0;
}

Upvotes: 2

Views: 2030

Answers (1)

alexndreazevedo
alexndreazevedo

Reputation: 381

The best approach to your problem is using a combination of selectors (+ and >):

// For remove padding of nested table-cell
table.dataTable tbody tr.shown + tr > td {
    padding: 0;
}

// For set the width of first column
table.dataTable tbody tr.shown + tr table.dataTable tbody td.sorting_1,
td.details-control {
    width: 40px;
}

http://jsfiddle.net/alexndreazevedo/jpnr2e6c

Unfortunately, is only possible align nested columns setting a fixed percentual for each column. However it probably couldn't be readable with fluid text.

A workaround is change your markup. Depends of you!

Upvotes: 1

Related Questions