How to render non-DataTable tables inside DataTable cells

DT_User_123

When using the column render function to render object data using html tags, the newly rendered html table inherits unwanted styles and behaviours from the parent DataTable.

See below jsfiddle example. Click on the column headers to see how the sorting affects the rendered sub-tables.
http://jsfiddle.net/ojtna3yg/

How do I render a html table inside a DataTable cell as a fresh, clean, non-DataTable html table?

DT_User_123

Correction: no sorting issues exist. It just looked like it due to the way I set up the example.

The styling issues still apply though. How to I render a table with fresh styling inside a cell?

DT_User_123

I've found a work-around.

Rather than using the html

<

table> tag, the tables can be rendered CSS and div/span tags instead of using

<

table> tags (see http://www.vanseodesign.com/css/tables/ for more info).

Here is an updated jsfiddle showing my working embedded tables that have fresh clean css (no inheritance from the DataTable).
http://jsfiddle.net/eexw71as/