How to render non-DataTable tables inside DataTable cells

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?