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="3">Pick</th>
                <th>Genius</th>
                <th>Genius Credential</th>
                <th class="borderRightRadius">Result</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bigGap">
                <td colspan="8"></td>
            </tr>
            <tr class="pickHeading">
                <td colspan="8" class="borderLeftRadius">blah</td>
            </tr>
            <tr class="consensus">
                <td rowspan="4">plah</td>
                <td rowspan="4">flah</td>
                <td rowspan="4">glah</td>
                <td class="dotted"></td>
                <td>vlah</td>
                <td>mlah</td>
                <td>nlah</td>
                <td rowspan="4" class="lastCol">jlah</td>
            </tr>
            <tr class="consensus">
                <td class="dotted"></td>
                <td>clah</td>
                <td>dlah</td>
                <td>xlah</td>
            </tr>
            <tr class="consensus">
                <td class="dotted"></td>
                <td>plah</td>
                <td>slah</td>
                <td>klah</td>
            </tr>
            <tr class="consensus">
                <td class="lastRow dotted"></td>
                <td class="lastRow">qlah</td>
                <td>wlah</td>
                <td>zlah</td>
            </tr>
            
            <tr class="smallGap">
                <td colspan="8"></td>
            </tr>            
            <tr class="pickHeading">
                <td colspan="8" class="borderLeftRadius">blah</td>
            </tr>
            <tr>
                <td rowspan="4">plah</td>
                <td rowspan="4">flah</td>
                <td rowspan="4">glah</td>
                <td...

CSS

.geniusPicks {}

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

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

.geniusPicks td.dotted {border:none;}

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

.geniusPicks tr td.lastRow {border-bottom:1px solid;}

.geniusPicks td.lastCol {border-right: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;}