JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<table id="table">
    <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
        <th>1</th>
        <th colspan="2">1</th>
    </tr>
    <tr>
        <td rowspan="3">2</td>
        <td>2</td>
        <td>2</td>
        <td rowspan="2" colspan="2">2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
</table>

CSS

body {
    padding:50px;
}
.ch {
    font-size:0;
    line-height:0;
    border-collapse: collapse;
    position: fixed;
    top: 0px;
    left: 0px;
}
.ch td,
.ch th {
    width: 1px;
    height: 1px;
    padding: 0px;
    background: red;
    border:none;
    position:relative;
    z-index:9999;
}
.ch td *,
.ch th * {
    display:none;
}
td, th {
    border:1px solid #000;
    color:#888;
    padding:10px;
    text-align:center;
}

JavaScript

var tableGrid = {
        
    check: function( pos ) {
        try {
           
            var x = pos.col - 1;
            var y = pos.row - 1;
            return document.elementFromPoint( x, y );

        } catch(e){ return null; }
    }
};
document.getElementById('table').classList.add('ch');
tableGrid.check( { row: 2, col: 3 } ).style.background = "#000";
document.getElementById('table').classList.remove('ch');