JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.geniusPicks {}

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

.geniusPicks td {border-color:black; border-right:1px solid; border-bottom:1px solid;}

.geniusPicks td.dottedRight {border-right:1px dotted;}

.geniusPicks td.dottedBottom {border-bottom:1px dotted;}

.geniusPicks td.firstCol {border-left:1px solid;}

.geniusPicks #picksHeading th {color:white; font-weight:bold; height:30px; background:darkRed;}

.geniusPicks .pickHeading td {border:none; border-bottom:1px solid; background:red; padding-left:10px; border-right:1px solid red;}

.geniusPicks .bigGap td {border:none; height:19px;}

.geniusPicks .smallGap td {border:none; height:10px;}

.geniusPicks .consensus {background:gray;}

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

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

.geniusPicks .borderLeftRadius {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;}

.geniusPicks .borderRightRadius {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;}