JSFiddle - React, Tailwind, and code Playground

by Jeferson Almeida

HTML

<table width="300" border="1" cellpadding="5" style="text-align: center">
<tr>
<th width="75"><strong>Name</strong></th>
<th><span style="font-weight: bold;">Telephone</span></th>
</tr>
<tr>
<td>John</td>
<td style="position: relative"><div style="height: 100%; width: 100%; background:green; position: absolute; top: 0; left: 0">0123 456 785</div></td>
</tr>
<tr>
<td>Cassie</td>
<td style="position: relative"><div style="height: 100%; width: 100%; background:green; position: absolute; top: 0; left: 0">9876 532 432</div></td>
</tr>
</table>

CSS

/** table layout fixed in order to force equal column widths of 25% */
table{
    width: 100%;
    height: 100%;
    border: none;
    
}



table tr td, table tr th{
    border: none;
    padding:15px;
    height: 100%;
    width: 100%;
    border: 1px solid #ccc;
}