JSFiddle - React, Tailwind, and code Playground

by Tim Büthe

HTML

<table>
    <tr>
        <th>Headline 1</th>
        <th>Headline 2</th>
        <th>Headline 3</th>
        <th>Headline 4</th>
    </tr>
    <tr>
        <td><a>c 1</a></td>
        <td><a>content 2</a></td>
        <td><a>content 3</a></td>
        <td>text content 4</td>
    </tr>
    <tr>
        <td><a>c 1</a></td>
        <td><a>more text, that get split in two rows <br>content 2</a></td>
        <td><a>content 3</a></td>
        <td>text content 4</td>
    </tr>
</table>

CSS

a {
    background-color: lightgray;
    display: block;
    cursor: pointer;
}

td, th {
    border: 1px solid black;
}

td a {
    min-height: 100%;
}

th {
    text-align: center;
    background-color: blue;
    color: white;
    font-weight: bold;
}

JavaScript

$(document).ready(function(){    
    $('table tr').each(function(){
        var $row = $(this);
        var height = $row.height();
        $row.find('a').css('height', height).append('&nbsp;');  
    });       
});