JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<h3>Sub-Table rendered using CSS tables does not inherit styles from DataTable</h3>
<table id="dataTable" class="row-border cell-border order-column stripe"></table>

CSS

h3 {
    color: steelblue;
}
.subtabletable {
    display: table;
}
.subtable .row {
    display: table-row;
}
.subtable .header {
    font-weight: bold;
}
.subtable .cell {
    display: table-cell;
    padding: 5px;
}

JavaScript

$(document).ready(function () {
	var myData = [{
			employee : "Bob Smith",
			projects : [{
					project : "Alpha",
					role : "Leader"
				}, {
					project : "Beta",
					role : "Assistant"
				}
			]
		}, {
			employee : "Tom Peterson",
			projects : [{
					project : "Alpha",
					role : "Assistant"
				}, {
					project : "Beta",
					role : "Leader"
				}
			]
		}
	];

	var myColumns = [
        {
			title : "Employee",
			data : "employee"
		}, 
        {
			title : "Projects",
			data : null,
			render : function (data, type, row, meta) {
				var subtableHtml = "<div class='subtable'>";
                subtableHtml += "<div class='row header'><span class='cell'>Project</span><span class='cell'>Role</span></div>";
				for (var i = 0; i < data.projects.length; i++) {
					subtableHtml += "<div class='row'>";
					subtableHtml += "<span class='cell'>" + data.projects[i].project + "</span>";
					subtableHtml += "<span class='cell'>" + data.projects[i].role + "</span>";
					subtableHtml += "</div>";
				};
				subtableHtml += "</div>";
                return subtableHtml;
			}
		}
	];

	$('#dataTable').dataTable({
        searching: false,
        paging: false,
		data : myData,
		columns : myColumns
	});
});