title: JQuery DataTables - Style Child Rows
body: <p>So I'm recreating the solution from this post.</p>
  
  <p><a href="https://stackoverflow.com/questions/33025134/jquery-datatable-with-parent-child-relationship-in-same-dataset-how-to-display">JQuery Datatable with parent child relationship in same dataset. How to display it as parent child rows in the table?</a></p>
  
  <p>Take a look at the accepted answer and run the code.</p>
  
  <p>You have a table like this, with child rows.</p>
  
  <p><a href="https://i.stack.imgur.com/k24Rs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k24Rs.jpg" alt="Table image"></a></p>
  
  <p>Those child <code>&lt;tr&gt;</code> and <code>&lt;td&gt;</code> elements are created inside of another <code>&lt;table&gt;</code> which is embedded inside of <strong>another</strong> <code>&lt;tr&gt;</code> and <code>&lt;td&gt;</code> tag.  If you have FireBug installed, click on Inspect Element to see this.</p>
  
  <p><a href="https://i.stack.imgur.com/iI53A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iI53A.jpg" alt="Inspect"></a></p>
  
  <p>Take a look at the <code>&lt;tr&gt;</code> line in dark blue and the <code>&lt;td&gt;</code> below it.  It looks like those are automatically created by something.  I can't see where those are coming from.  I want to have my child <code>&lt;tr&gt;</code> and <code>&lt;td&gt;</code> elements (currently inside the table in the light blue line) in the same order as the parent columns.  I can strip out the <code>&lt;table&gt;</code> element, but I don't see why this is all embedded in a <code>&lt;td&gt;</code>.  Can anyone see a way to have my child elements appear in a row just like any other?</p>
  
  <p>One final thought.  Is there any chance these rows would show up on an export?
  <a href="https://datatables.net/extensions/buttons/examples/initialisation/export.html" rel="nofollow noreferrer">https://datatables.net/extensions/buttons/examples/initialisation/export.html</a></p>