JSFiddle - React, Tailwind, and code Playground

by Jerrygoyal

HTML

<h2>Size Chart</h2>
<div style="width:200px">
<table>
<tbody>
<tr>
<td width="64">
<p>someSize</p>
</td>
<td width="84">
<p>someLength (cm)</p>
</td>
<td width="92">
<p>someChest (cm)</p>
</td>
<td width="259">
<p>someHeight (cm)</p>
</td>
</tr>
<tr>
<td width="64">
<p>M</p>
</td>
<td width="84">
<p>68</p>
</td>
<td width="92">
<p>96</p>
</td>
<td width="259">
<p>l60 - l70</p>
</td>
</tr>
<tr>
<td width="64">
<p>L</p>
</td>
<td width="84">
<p>70</p>
</td>
<td width="92">
<p>100</p>
</td>
<td width="259">
<p>l70 - 175</p>
</td>
</tr>
<tr>
<td width="64">
<p>XL</p>
</td>
<td width="84">
<p>74</p>
</td>
<td width="92">
<p>110</p>
</td>
<td width="259">
<p>175 - 185</p>
</td>
</tr>
<tr>
<td width="64">
<p>XXL</p>
</td>
<td width="84">
<p>76</p>
</td>
<td width="92">
<p>115</p>
</td>
<td width="259">
<p>180 - 190</p>
</td>
</tr>
</tbody>
</table>
</div>

CSS

table::-webkit-scrollbar {
    -webkit-appearance: none;
}

table::-webkit-scrollbar:vertical {
    width: 11px;
}

table::-webkit-scrollbar:horizontal {
    height: 11px;
}

table::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

table {
  width:100%;
    table-layout: fixed;
    border:solid 2px;
    
}
tr, td{
   border:solid 1px;
}
tbody{
      overflow-x: auto !important;
    display: block !important;
}