title: Jquery datatables - fnopen() detail table does not occupy full width
body: <p>I have a set of rows I am displaying via <code>jQuery</code> datatables , basically using a grid list in MVC <code>ASP.net</code> and then using <code>jQuery</code> datatables to expand each row of data to show new table data. 
  The detail table data does not occupy the full width of the row and shows up like this</p>
  
  <p><img src="https://i.stack.imgur.com/MZlbU.png" alt="Table example"></p>
  
  <p>My call to open table function is </p>
  
  <pre><code>oTable.fnOpen(nTr, details, 'LP')
  </code></pre>
  
  <p>where <strong>LP</strong> is the styling class of the parent table as seen in the figure, but it is not being applied. Ive tried applying the styling to the <code>HTML</code> itself of the detail rows but to no avail
  How do I make it take the styling of the parent table and occupy the width of the parent table? </p>
  
  <p><strong>ANSWER:</strong> </p>
  
  <p>It turns out my sortable columns in the parent table were preventing the styling from working with the child tables - I havent studied enough to learn why yet, but something as a reference to anyone with the problem. Putting a sort on all columns of the parent table and changing the styling of the child to include 100% width worked. </p>