Answers

• rf1234 Posts: 2,809Questions: 85Answers: 406

  October 2023

  I would just wrap this in a div-tag and add the style for the background color to that div.
  Maybe something like this could work (haven't tested it):

  // Formatting function for row details - modify as you need
  function format(d) {
      // `d` is the original data object for the row
      return (
         '<div style="background-color:lightblue"> +
          '<dl>' +
          '<dt>Full name:</dt>' +
          '<dd>' +
          d.name +
          '</dd>' +
          '<dt>Extension number:</dt>' +
          '<dd>' +
          d.extn +
          '</dd>' +
          '<dt>Extra info:</dt>' +
          '<dd>And any further details here (images etc)...</dd>' +
          '</dl>' + 
          '</div>
      );
  }
  
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  October 2023 Answer ✓

  @rf1234 has a good and simple answer. Another option is to use use CSS. If you inspect the parent row you will see the class dt-hasChild is applied when the child is shown. You can use a CSS like this:

  tr.dt-hasChild + tr {
    background-color: green!important;
  }
  

  https://live.datatables.net/nubiworo/1/edit

  Two options to choose from

  Kevin
• Tripple Delta Posts: 8Questions: 1Answers: 0

  October 2023

  Thanks a lot. But I had to change it like this to keep it alternating.

  tr.odd.dt-hasChild + tr {
      background-color: green !important;
  }