JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<table class="outer-table">
	<thead>
		<th>Heading 1</th>
	</thead>
	<tbody>
		<tr>
			<td>
				Content 1
			</td>
			<td>
				<table>
					<thead>
						<th>Heading 1.1</th>
						<th>Heading 1.2</th>
					</thead>
					<tbody>
						<tr>
							<td>
								Content 1.1
							</td>
							<td>
								Content 1.2
							</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				Content 2
			</td>
			<td>
				<table>
					<thead>
						<th>Heading 2.1</th>
						<th>Heading 2.2</th>
					</thead>
					<tbody>
						<tr>
							<td>
								Content 2.1
							</td>
							<td>
								Content 2.2
							</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</tbody>
</table>
</body>

CSS

table tr:first-of-type table {
    margin:-1.6em 0 0
}

JavaScript

function styleHeaders(){
		//Hide all except the first nested headers.
		$(".outer-table table").find("thead").not(":eq(0)").css('display', 'none');
		
		//Move first nested table header up.
		$(".outer-table table").find("thead:eq(0)").css('background-color', 'red');
	}
	
	styleHeaders();