JSFiddle - React, Tailwind, and code Playground
HTML
<div class="head">
<table>
<thead>
<tr>
<th>
Reference
</th>
<th class="grow">
Name
</th>
<th>
Base ($)
</th>
<th>
Units
</th>
<th>
Total ($)
</th>
<th class="fix"> </th>
</tr>
</thead>
</table>
</div>
<div class="body">
<table>
<tbody>
<tr>
<td>
440148
</td>
<td class="grow">
Product 1
</td>
<td>
29.9
</td>
<td>
1
</td>
<td>
29.90
</td>
</tr>
<tr>
<td>
100614
</td>
<td>
Product 2
</td>
<td>
0.99
</td>
<td>
2
</td>
<td>
1.98
</td>
</tr>
<tr>
<td>
101702
</td>
<td>
Product 3
</td>
<td>
0.99
</td>
<td>
2
</td>
<td>
1.98
</td>
</tr>
<tr>
<td>
101204
</td>
<td>
Product 4
</td>
<td>
3.95
</td>
<td>
1
</td>
<td>
3.95
</td>
</tr>
<tr>
<td>
700140
</td>
<td>
Product 5
</td>
<td>
1.05
</td>
<td>
2
</td>
...
CSS
.head,.body{width:400px} /*<-- play width this width*/
.body{*width:383px;_width:400px} /*ie7 fix: width -= 17px*/
table{border-collapse:collapse;table-layout:fixed;width:100%;_width:auto}
.body{overflow:scroll;overflow-x:hidden;*padding-right:17px;_padding-right:0} /*ie7 fix:padding to 17px*/
.fix{width:16px;*width:17px;_width:16px}
@media screen and (-webkit-min-device-pixel-ratio:0){.fix{width:17px}}
th,td{width:4.7em}
.grow{width:auto}
.body{max-height:5.75em;min-height:2.5em;padding-bottom:0.8em;_height:10em}