JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<thead>
    <tr><th>Head1</th><th>Head2</th><th>Head3</th></tr>
</thead>
<tbody>
    <tr><td>Cell 1.1 SPAM THIS BOX WITH LOADS OF TEXT, ALRIGHT! YES!</td><td>Cell 1.2</td><td><div></div><span>Teeeeext!</span></td></tr>
    <tr><td>2.1</td><td>2.2</td><td><div></div><span>Moooore teeeext! Yaaaay!</span></td></tr>
</tbody>

CSS

th {
    width: 80px;
}
td {
    width: 80px;
    border: 1px solid black;
    position: relative;
    color:#333333;
    font: 10pt Verdana;
    vertical-align: top;
    padding: 0; margin: 0;
}
td div {
    position: absolute;
    height:100%; width:100%;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    filter:alpha(opacity=50);
    opacity:0.5;
    background:#809311;
}
span {
    position: relative;
    z-index: 1;
}