JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://raw.github.com/aFarkas/html5shiv/master/dist/html5shiv.js"></script>
<!DOCTYPE html>
<html>
<table>
<tr>
    <td>1.1</td>
    <td>2.1</td>
</tr>
<tr>
    <td>1.2</td>
    <td>2.2</td>
</tr>
<tr>
    <td>1.3</td>
    <td>2.3</td>
</tr>
<tr>
    <td colspan="2">1.4 + 2.4</td>
</tr>
</table>
</html>

CSS

td {
    border: 1px solid #333;
}

td.hovered {
    background: yellow;
}

JavaScript

addColumnHover(document.querySelector('table'));

function addColumnHover(table) {
    var HOVER_CLASS = 'hovered';
    var hovered;

    table.addEventListener('mouseover', function (e) {
        if (e.target.tagName.toLowerCase() == 'td') {
            var index = e.target.cellIndex;

            hovered && hovered.forEach(function (cell) {
                cell.classList.remove(HOVER_CLASS);
            });

            hovered = Array.prototype.map.call(
                table.rows,
                function (row) {
                    var i = index;
                    while (!cell && i >= 0) {
                        var cell = row.cells[i];
                        i -= 1;
                    }
                    return cell;
                }
            );

            hovered.forEach(function (cell) {
                cell.classList.add(HOVER_CLASS);
            });
        }
    }, true);

    table.addEventListener('mouseout', function (e) {
        hovered && hovered.forEach(function (cell) {
            cell.classList.remove(HOVER_CLASS);
        });
        hovered = null;
    }, true);
}