JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<table>
    <tbody>
        <tr>
            <td><strong>Baked Goods</strong>

            </td>
            <td></td>
            <td><strong><a href="/en/pharmaandfooddowcom/home/food-solutions/products/methocel">METHOCEL™</a></strong>

            </td>
            <td><strong><a href="/en/pharmaandfooddowcom/home/food-solutions/products/fortefiber">FORTEFIBER™</a></strong>

            </td>
            <td><strong>WALOCEL™</strong>

            </td>
        </tr>
        <tr>
            <td rowspan="4">Texture Enhancement</td>
            <td>Binding</td>
            <td style="text-align: center;">•</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Foaming</td>
            <td style="text-align: center;">•</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Heat-setting</td>
            <td style="text-align: center;">•</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Stabilizing</td>
            <td></td>
            <td></td>
            <td style="text-align: center;">•</td>
        </tr>
        <tr>
            <td rowspan="2">Free From</td>
            <td>Gluten</td>
            <td style="text-align: center;">•</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Egg</td>
            <td style="text-align: center;">•</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="2">Weight Management</td>
            <td>Fat</td>
            <td style="text-align: center;">•</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Glucose and Cholesterol Management</td>
            <td></td>
            <td style="text-align: center;">•</td>
            <td></td>
        </tr>
    </tbody>
</table>

SCSS

$gray: #B8B8B8;
 table {
    width: 100%;
    border-spacing: 0;
    border: 1px solid $gray;
    border-left: 0;
    overflow: hidden;
    margin-bottom: 10px;
    tr {
        &:first-child {
            td {
                border-top: 0;
            }
        }
            
        td,
        th {
            &:first-child[rowspan] {
                border-right: 0 !important;
            }
            border-right: 0 !important;
            border-left: 1px solid $gray !important;
            border-top: 1px solid $gray;
            padding: 8px;
        }
    }
}