JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table class="ContainerDiv" id="Panel_7">
<tbody>
<tr>
<th class="ui-widget-header" colspan="9">
<h2>Line Items </h2>
</th>
</tr>
<tr>
<th class="ui-widget-header">Line Item Index</th>
<th class="ui-widget-header">Reference</th>
<th class="ui-widget-header">Barcode</th>
<th class="ui-widget-header">Size 1 Actual</th>
<th class="ui-widget-header">Size 1 Planned</th>
<th class="ui-widget-header">Size 2 Actual</th>
<th class="ui-widget-header">Size 2 Planned</th>
<th class="ui-widget-header">Size 3 Actual</th>
<th class="ui-widget-header">Size 3 Planned</th>
</tr>
<tr>
<td>1</td>
<td>261264</td>
<td>261264</td>
<td>1</td>
<td>1</td>
<td>4</td>
<td>4</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>2</td>
<td>261265</td>
<td>261265</td>
<td>1</td>
<td>1</td>
<td>4</td>
<td>4</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td>261266</td>
<td>261266</td>
<td>2</td>
<td>2</td>
<td>8</td>
<td>8</td>
<td>16</td>
<td>16</td>
</tr>
<tr>
<td>4</td>
<td>261267</td>
<td>261267</td>
<td>3</td>
<td>3</td>
<td>12</td>
<td>12</td>
<td>24</td>
...
CSS
html, body {
height:100%;
margin:0;
padding:0;
font-size:90%;
}
table {
border-collapse: collapse;
font-size: 1.1em;
height: 100%;
position: relative;
width: 100%;
}
th {
max-height:100px;
}
th, td {
padding:5px;
}