JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>5</td>
        </tr>        
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>        
        <tr>
            
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
    </tbody>
</table>

CSS

table { border-spacing: 0; border-collapse: separate; width: 50%; border-radius: 5px 5px 0 0; background: url(http://design-warez.ru/uploads/posts/2009-04/1239891108_1238678481_8.jpg); }

th, td { padding: 5px 1em; text-align: center; }

thead th:first-child { border-radius: 5px 0 0 5px; box-shadow: -5px 0 0 5px #fff; }

thead th:last-child { border-radius: 0 5px 5px 0; box-shadow: 5px 0 0 5px #fff; }

tbody { background: #fff; } /* обход бага Chrome, ломающего заливку thead или tr */

tbody td { border-top: 1px #888 dotted; }

tbody tr:first-child td { border: none; }