JSFiddle - React, Tailwind, and code Playground

HTML

<table id="test">
                <tr id="userr1"><th>Left</th><th class="mid">-</th><th>Right</th></tr>
                <tr id="row1"><td>cell</td><td class="mid">-</td><td>cell</td></tr>
                <tr id="row2"><td>cell</td><td class="mid">-</td><td>cell</td></tr>
                <tr id="row3"><td>cell</td><td class="mid">-</td><td>cell</td></tr>
                <tr id="row4"><td>cell</td><td class="mid">-</td><td>cell</td></tr>
                <tr id="row5"><td>cell</td><td class="mid">-</td><td>cell</td></tr>
                <tr id="row6"><td>cell</td><td class="mid">-</td><td>cell</td></tr>
                <tr id="row7"><td>cell</td><td class="mid">-</td><td>cell</td></tr> 
</table>

CSS

#test,th,td{
    border:1px solid black;
    margin:0px;

}
.mid{
    border:none;
    padding:0px;
    margin:0px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}