JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<table id="table_1">
<tr><td>#0</td><td><input id="a_0" value="0" style="color: green; font-weight: bold;"></td><td><input id="b_0" value="0" style="background: rgb(187, 255, 187);"></td></tr><tr><td>#1</td><td><input id="a_1" value="1" style="color: green; font-weight: bold;"></td><td><input id="b_1" value="1" style="background: rgb(187, 255, 187);"></td></tr><tr><td>#2</td><td><input id="a_2" value="2" style="color: green; font-weight: bold;"></td><td><input id="b_2" value="2" style="background: rgb(187, 255, 187);"></td></tr><tr><td>#3</td><td><input id="a_3" value="3" style="color: green; font-weight: bold;"></td><td><input id="b_3" value="3" style="background: rgb(187, 255, 187);"></td></tr><tr><td>#4</td><td><input id="a_4" value="4" style="color: green; font-weight: bold;"></td><td><input id="b_4" value="4" style="background: rgb(187, 255, 187);"></td></tr></table>

CSS

table[id*=table] tr > td
{
    border-radius: 0;
     border-spacing: 0;
    border-collapse: initial;
    white-space: nowrap;
  padding-left: 3px;
  padding-right: 3px;
    
}

table[id*=table] > thead > tr:first-child > td:first-child,
table[id*=table]:not(tfoot,thead) tr > td:first-child,
.r_top > tr:first-child > td:first-child,
.r_top
{
    border-top-left-radius: 6px;
}

    table[id*=table] > thead > tr:first-child > td:last-child,
    table[id*=table]:not(tfoot,thead) tr:first-child > td:last-child,
    .r_top > tr:first-child > td:last-child,
    .r_top
    {
        border-top-right-radius: 6px;
    }

table[id*=table] > tfoot > tr:last-child > td:last-child,
table[id*=table]:not(tfoot,thead) tr:last-child > td:last-child,
.r_bottom > tr:last-child > td:last-child,
.r_bottom
{
    border-bottom-right-radius: 6px;
}

    table[id*=table] > tfoot > tr:last-child > td:first-child,
    table[id*=table]:not(tfoot,thead) tr:last-child > td:first-child,
    .r_bottom > tr:last-child > td:first-child,
    .r_bottom
    {
        border-bottom-left-radius: 6px;
    }