JSFiddle - React, Tailwind, and code Playground

HTML

Rounded border but spaces:


<TABLE style="border-radius: 5px; border: 1px solid #999; xborder-collapse: collapse;">
    <THEAD>
    <TR style="background-color: red; "> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
    </THEAD>
    <TBODY>
    <TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
    <TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
    <TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
    </TBODY>
    </TABLE>

No rounded edges
    <TABLE style="border-radius:5px;border:1px solid #999;border-collapse: collapse;">
    <THEAD>
    <TR style="background-color: red; "> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
    </THEAD>
    <TBODY>
    <TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
    <TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
    <TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
    </TBODY>
    </TABLE>


With a wrapper
<div style="display:table;padding:2px;border-radius:5px;border:1px solid #999;">
    <TABLE style="border-collapse: collapse;">
    <THEAD>
    <TR style="background-color: red; "> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
    </THEAD>
    <TBODY>
    <TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
    <TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
    <TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
    </TBODY>
    </TABLE>
 </div>