JSFiddle - React, Tailwind, and code Playground

by swfour

HTML

<table>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
</table>

CSS

td{
    height:50px;
    width:50px;
    border:2px solid #000;
}
td:nth-child(2){
    width:40px;    
}
tr:nth-child(2) td{
    height:40px;    
}
tr:first-child td:first-child, 
tr:first-child td:last-child,
tr:last-child td:first-child,
tr:last-child td:last-child{
    border:2px solid #ff0000;
}


tr:first-child td:nth-child(2) {
    border-bottom:none;

}
tr:last-child td:nth-child(2) {
    border-top:none;
}
tr:nth-child(2) td:nth-child(2) {
    border:none;
}
tr:nth-child(2) td:first-child {
    border-right:none;
}
tr:nth-child(2) td:last-child {
    border-left:none;
}