Background color to child rows

Tdazle007

Hello guys, please how do you add background color to child rows of datatables. Here is a test case.

http://live.datatables.net/qeweyiji/4/edit

silkspin

If you want a flat colour you can do this...

tbody tr.child td {
  background-color: #ff0;  
}

Or if you want the rows to alternate odd/even then you can do this...

tbody tr.child td ul {
  width: 100%;
}

tbody tr.child td li:nth-child(odd) {
  background-color: #ff0;  
}

tbody tr.child td li:nth-child(even) {
  background-color: #0ff;  
}

http://live.datatables.net/qeweyiji/5/edit

Tdazle007

Thanks so much for your response. What i was looking for was in such a way that i give an ID to a particular <th> or <td> and the <th> or <td> inherits the background set in the css. Is that possible?

silkspin

You can give a class columns.className to columns but I'm not sure they would work once in the child row. You can add styles to the child rows in the js like in this...

  function format ( d ) {
    var html = '<table>';
      html += '<tr>'+
              '<td  class="abc">Child row 1</td>'+
              '<td class="abc">' + d.columnname1 + '</td>'+
              '</tr>'+
              '<tr>'+
              '<td class="def">Child row 2</td>'+
              '<td class="def">' + d.columnname2 + '</td>'+
              '</tr></table>';
      return html;
  }

This is how I managed it in my case. Although I used class and not id because I applied styles to multiple <td>. If this doesn't help in your case I think someone else will need to help you.

silkspin

Have you looked at this example?

https://datatables.net/examples/api/row_details.html

This is what my version is based on.

Tdazle007

Thank you so much. Let me try this. Once it works I'll give you a feedback.

Tdazle007

Thank you silkspin. It worked!