Хидер таблицы должен быть закреплён, но в Internet explorer свойство sticky не работает, как пофиксить?

Question

balgarot @balgarot

HTML
CSS

Хидер таблицы должен быть закреплён, но в Internet explorer свойство sticky не работает, как пофиксить?

У меня есть таблица в которой как в Excel должны быть закреплены верхние ячейки и левые крайние, но из-за того, что тег sticky в 11 IE не существует, верхний хидер не закреплён. Используя тег fixed вся таблица ломается. Как фиксить?
Вот код

<html>
 <head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta charset="utf-8">
 <script src="jquery.min.js">
	
</script>

 <style type="text/css">
 /* table style */
	table {
		font-family: Arial, Helvetica, sans-serif;
		border-collapse: collapse;
		width: 100%;
	}

	/*#customers td, #customers th {*/
	td, th {
		border: 1px solid #ddd;
		padding: 8px;
		vertical-align:top;
		background-color: white;
	}

	.tgHeader th{
		background-color: #00aedb;
	}
	
	thead th{
		background-color: #00aedb !important;
		font-weight: bold;
		text-align: center;
	}

	tr:nth-child(n):hover td {
	  	background: #eee;
	}

	/* collaps table rows */
	tr.tgHeader {
		font-weight: bold;
  		cursor: pointer;
		background-color: #00aedb !important;
	}

	th.tgHeader{
		text-align: center !important;
	}

	.tgHeaderExtended{
		background-color: #00aedb !important;
		z-index: 0 !important;
   	}

	.tgHeader .sign:after {
		content: "-";
		display: inline-block;
	}

	.tgHeader.expand .sign:after {
		content: "+";
	}
	.tgHeader{
		z-index: 2;
	}

	/* table freeze 1 column and header table */
	table thead {
		padding: 3px;
		position: sticky;
		top: 0;
		z-index: 2;
	}

	table td {
		padding: 4px 5px;
	}

	table tbody {
		position: relative;
	}
	table thead th:nth-child(1) {
		position: sticky;
		left: 0;
		z-index: 2;
	}

	table tbody th {
		position: sticky;
		left: 0;
		z-index: 1;
	}

</style>

<script type="text/javascript">
	/* table freeze 1 column and header table */
	$(document).ready(function() {
		/*$('tbody').scroll(function(e) { 
			$('thead').css("left", -$("tbody").scrollLeft());
			$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); 
			$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); 
		});*/

		/* collaps table rows */
		$('.tgHeader').click(function(){
			$(this).toggleClass('expand').nextUntil('tr.tgHeader').slideToggle(100);
		});
	});
</script>
</head>
<body><table>
	<thead>
		<tr>
			<th>Текст</th><th>233</th><th>232</th><th>231</th>
		</tr><tr class="tgHeader">
			<th>Текст </th><td><table>
	<tr>
		<td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td>
	</tr><tr>
		<td>Текст</td><td>100</td><td>Текст</td><td>123</td><td>12355</td>
	</tr><tr>
		<td>Текст</td><td>5</td><td>321</td><td>123</td><td>T20154</td>
	</tr><tr>
		<td>Текст</td><td>27,222</td><td>12313</td><td>321</td><td>0001</td>
	</tr>
</table></td><td><table>
	<tr>
		<td>Текст</td><td>Текст</td><td>Текст</td><td>Дата отбора</td><td>Текст</td>
	</tr>
</table></td><td><table>
	<tr>
		<td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td>
	</tr>
</table></td>
		</tr>
	</thead><tbody>
		<tr class="tgHeader">
			<th><span class="sign"></span> Заголовок </th><th class="tgHeaderExtended" colspan="5"></th>
		</tr><tr>
			<th>Текст </th><td>2 Текст</td><td>2 Текст</td><td>2 Текст</td>
		</tr><tr>
			<th>Текст</th><td>Текст</td><td>Текст</td><td>Текст</td>
		</tr><tr>
			<th>Текст</th><td>Текст 12</td><td>Текст 12</td><td>Текст 12</td>
		</tr><tr>
			<th>Текст</th><td>12-4</td><td>12-4</td><td>12-4</td>
		</tr><tr>
			<th>Текст</th><td>Текст</td><td>Текст</td><td>Текст</td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td>Текста</td><td>Текст</td><td>Текст</td>
		</tr><tr>
			<th>Текст</th><td>2</td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td>0,661</td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td>0,272</td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст </th><td>Текст</td><td>Текст</td><td>Текст</td>
		</tr><tr>
			<th>Текст </th><td>Текст</td><td>Текст</td><td>Текст</td>
		</tr><tr class="tgHeader">
			<th><span class="sign"></span> Заголовок</th><th class="tgHeaderExtended" colspan="4"></th>
		</tr><tr>
			<th>Текст </th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст </th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr class="tgHeader">
			<th><span class="sign"></span> Заголовок</th><th class="tgHeaderExtended" colspan="4"></th>
		</tr><tr>
			<th>Текст </th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr class="tgHeader">
			<th><span class="sign"></span> Заголовок</th><th class="tgHeaderExtended" colspan="4"></th>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td></td><td></td>
		</tr><tr>
			<th>Текст</th><td></td><td><table>
	<tr>
		<td>Текст</td><td>↑</td><td>↓</td><td>Текст</td><td>Текст</td>
	</tr><tr>
		<td>300</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>200</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>100</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>60</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>30</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>6</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>3</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr>
</table></td><td><table>
	<tr>
		<td>Текст</td><td>↑</td><td>↓</td><td>Текст</td><td>Текст</td>
	</tr><tr>
		<td>300</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>200</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>100</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>60</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>30</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>6</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr><tr>
		<td>3</td><td>0</td><td>0</td><td>0</td><td>0</td>
	</tr>
</table></td>
		</tr>
	</tbody>
</table></body> </html>

В хроме естественно всё работает правильно