JSFiddle - React, Tailwind, and code Playground

by Tom Randolph

HTML

<h2>
    Option 1
</h2>
<table>
    <thead>
        <tr>
            <th colspan="5">Student Information</th>
            <th rowspan="2">Composite (Overall) Scale</th>
            <th rowspan="2">Composite (Overall) Proficiency</th>
            <th rowspan="2">Composite (Overall) Confidence - High Score</th>
            <th rowspan="2">Composite (Overall) Confidence - Low Score</th>
            <th rowspan="2">Online tier Grade 1-12</th>
        </tr>
        <tr>
            <th>Student Name</th>
            <th>Gender</th>
            <th>School</th>
            <th>Year</th>
            <th>Grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jimmy Smith</td>
            <td>Male</td>
            <td>Hard Knocks</td>
            <td>2016</td>
            <td>6</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>2</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

<h2>
    Option 2
</h2>
<table>
    <thead>
        <tr>
            <th>Student Name</th>
            <th>Gender</th>
            <th>School</th>
            <th>Year</th>
            <th>Grade</th>
            <th>Composite (Overall) Scale</th>
            <th>Composite (Overall) Proficiency</th>
            <th>Composite (Overall) Confidence - High Score</th>
            <th>Composite (Overall) Confidence - Low Score</th>
            <th>Online tier Grade 1-12</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jimmy Smith</td>
            <td>Male</td>
            <td>Hard Knocks</td>
            <td>2016</td>
            <td>6</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>2</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

CSS

table{
    border: 1px solid #000000;
}

thead th[colspan]{
    border-bottom: 1px solid #000000;
}

tbody tr{
    border-top: 1px solid #000000;
}

tbody td{
    text-align: center;
}