JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<table>
    <col align="left"></col>
    <col width=20></col>
    <col align="right"></col>
    <col align="right"></col>
    <col align="right"></col>
    <col align="right"></col>
    <tr class="border_top">
        <td><b>XYZ1</b></td>
        <td></td>
        <td>2.120</td>
        <td><span style="color:blue">2.280</span></td>
        <td><span style="color:blue">2.810</span></td>
        <td>3.000</td>
    </tr>
    <tr >
        <td><b>ABC1</b></td>
        <td></td>
        <td class="border_bottom" >1.370</td>
        <td class="border_bottom" ><span style="color:blue">1.550</span></td>
        <td class="border_bottom" >1.690</td>
        <td class="border_bottom" ><span style="color:blue">1.780</span></td>
    </tr>
    <tr>
        <td><b>XYZ2</b></td>
        <td></td>
        <td><span style="color:blue">1.900</span></td>
        <td>1.940</td>
        <td>2.050</td>
        <td><span style="color:blue">2.100</span></td>
    </tr>
    <tr class="border_bottom">
        <td><b>ABC2</b></td>
        <td></td>
        <td><span style="color:blue">1.910</span></td>
        <td>1.950</td>
        <td>2.060</td>
        <td><span style="color:blue">2.100</span></td>
    </tr>
</table>

CSS

table {   border-spacing: 0; }

        tr.border_top td {
            border-top:1pt solid black;
        }
        tr.border_bottom td {
            border-bottom:1pt solid black;
        }
        td {padding:20px;}
        
        td.border_bottom {
          border-bottom:1pt solid black;
          }