JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table1">
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    </tbody>
</table>
<hr>
<table class="table2">
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    </tbody>
</table>

CSS

body {
    background:#777;
}
td {
    background-color: #EEE;
    text-align: center;
    outline: 2px solid orange;
    padding:5px;
}
td+td {
    border: 3px red solid; 
    outline: 2px solid yellow;
}
td+td+td {
    position:relative;
    outline: 2px solid green;
}
.table1 tbody {
    position: relative;
    z-index:2;
}