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="padding:0px;"><div style="background:green; padding:5px;">0123 456 785</div></td>
</tr>
<tr>
<td>Cassie</td>
<td style="padding:0px;"><div style="background:green;padding:5px;">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: 5px;
    height: 100%;
    width: 25%;
}