JSFiddle - React, Tailwind, and code Playground

HTML

<div class="geniusPicks">
    
    <table cellpadding="1" cellspacing="0">
        
        <thead>
            <tr id="picksHeading">
                <th>Sport</th>
                <th>Status</th>
                <th colspan="2">Pick</th>
                <th>Genius</th>
                <th>Genius Credential</th>
                <th>Result</th>
            </tr>
        </thead>
        
        <tbody>
            
            <tr class="bigGap">
                <td colspan="7"></td>
            </tr>
            
            <tr class="pickHeading">
                <td colspan="7">blah</td>
            </tr>
            <tr class="pickConsensusBody">
                <td rowspan="4">plah</td>
                <td rowspan="4">flah</td>
                <td rowspan="4">glah</td>
                <td>vlah</td>
                <td>mlah</td>
                <td>nlah</td>
                <td rowspan="4">jlah</td>
            </tr>
            <tr class="pickConsensusBody">
                <td>clah</td>
                <td>dlah</td>
                <td>xlah</td>
            </tr>
            <tr class="pickConsensusBody">
                <td>plah</td>
                <td>slah</td>
                <td>klah</td>
            </tr>
            <tr class="pickConsensusBody">
                <td>qlah</td>
                <td>wlah</td>
                <td>zlah</td>
            </tr>
            
            <tr class="smallGap">
                <td colspan="7"></td>
            </tr>
            
            <tr class="pickHeading">
                <td colspan="7">blah</td>
            </tr>
            <tr class="pickBody">
                <td rowspan="4">plah</td>
                <td rowspan="4">flah</td>
                <td rowspan="4">glah</td>
                <td>vlah</td>
                <td>mlah</td>
                <td>nlah</td>
                <td rowspan="4">jlah</td>
            </tr>
            <tr class="pickBody">
                <td>clah</td>
               ...

CSS

.geniusPicks {}

.geniusPicks table {width:100%; font-size:12px; border-collapse:separate;}

.geniusPicks table tr#picksHeading {border:0px solid; height:30px;}

.geniusPicks table tr#picksHeading th {background:darkRed; color:white; font-weight:bold;}

.geniusPicks table tr.pickHeading {border:0px solid;}

.geniusPicks table tr.pickHeading td {background:red; padding-left:10px;}

.geniusPicks table tr.pickHeading+tr td:last-child {border-right:solid 1px black;}

.geniusPicks table tr.pickConsensusBody td {
    border-left:1px solid;
    border-top:1px solid;
    background:grey;
}

.geniusPicks table tr.pickBody td {
    border-left:1px solid;
    border-top:1px solid;
}

.bigGap td {height:19px;}

.smallGap td {height:10px; border-top:solid 1px black;}

.geniusPicks table th,
.geniusPicks table th:last-child,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td:last-child {text-align:center;}


.geniusPicks table th+th+th, 
.geniusPicks table .pickHeading+tr td+td+td {text-align:left;}

/* Border Left Radius */
.geniusPicks table thead tr#picksHeading th:first-child, .geniusPicks table tr.pickHeading td {
    border-radius:15px 0 0 0; 
    -moz-border-radius:15px 0 0 0;
    -webkit-border-radius:15px 0 0 0;
    -khtml-border-radius:15px 0 0 0;
}

/* Border Right Radius */
.geniusPicks table thead tr#picksHeading th:last-child {
    border-radius:0 15px 0 0; 
    -moz-border-radius:0 15px 0 0;
    -webkit-border-radius:0 15px 0 0;
    -khtml-border-radius:0 15px 0 0;
}


.geniusPicks table .pickHeading+tr td:nth-child(4) {
    border-left-style:dotted;
    border-left-color:black;
    border-left-width:1px;
    border-top-style:solid;
    border-top-color:black;
    border-top-width:1px;
}

.geniusPicks table tr.pickConsensusBody td:first-child:not([rowspan]),
.geniusPicks table tr.pickBody td:first-child:not([rowspan]) {
    border-top-style:dotted;
    border-top-color:black;
    border-top-width:1px;
    border-left-style:dotted;
   ...