JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th colspan="3">Results</th>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="7" class="section-name">Section - 1</td>
                </tr>
                <tr>
                    <td class="data-name" colspan="3">Test - 1</td>
                    <td class="data-point">37.88</td>
                    <td class="data-point">87.43</td>
                    <td class="data-point">52.36</td>
                </tr>
                <tr>
                    <td class="data-name" colspan="3">Test - 2</td>
                    <td class="data-point">64.16</td>
                    <td class="data-point"></td>
                    <td class="data-point"></td>
                </tr>
                <tr>
                    <td class="data-name" colspan="3">Test - 3</td>
                    <td class="data-point">77.95</td>
                    <td class="data-point">78.61</td>
                    <td class="data-point">43.79</td>
                </tr>
                <tr>
                    <td class="data-name" colspan="3">Test - 4</td>
                    <td class="data-point">66.64</td>
                    <td class="data-point">48.12</td>
                    <td class="data-point">74.40</td>
                </tr>
                <tr>
                    <td class="data-name" colspan="3">Test - 5</td>
                    <td class="data-point">78.51</td>
                    <td class="data-point">98.21</td>
                    <td class="data-point">31.64</td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td colspan="7" class="section-name">Section - 2</td>
                </tr>
                <tr>
                    <td class="data-name" colspan="3">Test...

SCSS

@mixin borders {
    border: 1px solid black;
}

%borders {
    @include borders;
}

table {
    border-spacing: 0;

    th {
        text-align: center;
    }

    tr {
        th{
            @extend %borders;
        }

        td {
            @extend %borders;
            &.data-name {
                padding: 3px 100px 3px 3px;
            }

            &.data-point {
                text-align: center;
                padding: 3px 10px;
            }

            &.section-name {
                background-color: #999;
            }
        }
    }
}

@media print {
    tr {
        display: block;
    }

    .pagebreak {
        break-before: always !important;
        page-break-before: always !important;
        page-break-inside: avoid !important;
    }
}