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>