Zebra stripe a table

Output

Product	Category	Feature 1	Feature 2	Feature 3
Product A	B2B	Feature 1 description	Feature 2 description	Feature 3 description
Product B	B2C	Feature 1 description	Feature 2 description	Feature 3 description
Product C	B2B	Feature 1 description	Feature 2 description	Feature 3 description
Product D	B2C	Feature 1 description	Feature 2 description	Feature 3 description

Code

<style>
.table {
    width: min(100%, 90rem);
    overflow: auto;
}
/* just to make it easier to see */
table {
    width: min(100%, 960px);
}

tbody tr {
    color: #272727;
    background-color: #d4aa7d;
}

tbody tr:nth-child(even) {
    color:#ddd6b9;
    background-color:  #3e5f44;
}
th, td {
    text-align: left;
    padding: 0.5rem 0.75rem;
}
</style>

<div class="table" tabindex="0" role="region" aria-label="Zebra stripe a table">
    <table>
        <thead>
        <tr>
            <th>Product</th>
            <th>Category</th>
            <th>Feature 1</th>
            <th>Feature 2</th>
            <th>Feature 3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Product A</td>
            <td>B2B</td>
            <td>Feature 1 description</td>
            <td>Feature 2 description</td>
            <td>Feature 3 description</td>
        </tr>
        <tr>
            <td>Product B</td>
            <td>B2C</td>
            <td>Feature 1 description</td>
            <td>Feature 2 description</td>
            <td>Feature 3 description</td>
        </tr>
        <tr>
            <td>Product C</td>
            <td>B2B</td>
            <td>Feature 1 description</td>
            <td>Feature 2 description</td>
            <td>Feature 3 description</td>
        </tr>
        <tr>
            <td>Product D</td>
            <td>B2C</td>
            <td>Feature 1 description</td>
            <td>Feature 2 description</td>
            <td>Feature 3 description</td>
        </tr>
        </tbody>
    </table>
</div>