JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing="1" cellpadding "0" border="0">
    <tr>
        <td>test1</td>
        <td class="testTD">
            <span class="bar"></span>test1<span class="bar"></span>
        </td>
        <td>test1</td>
    </tr>
    <tr>
        <td>test2<br/>test2</td>
        <td class="testTD"><span class="bar"></span>test2<span class="bar"></span>
        </td>
        <td>test2</td>
    </tr>
    <tr>
        <td>test3<br/>test3<br/>test3</td>
        <td class="testTD"><span class="bar"></span>test3<span class="bar"></span>
        </td>
        <td>test3</td>
    </tr>
</table>

CSS

body {
    padding:15px;
}
table {
    background:grey;
    width:100%;
}
table td {
    text-align:center;
    vertical-align:top;
    background:white;
    padding:4px;
    width:33.33%;
    position:relative;
}

.testTD .bar:first-child,
.testTD .bar:last-child {
    display: block;
    background: #F00;
    width: 15px; height: 100%;
    position: absolute; top: 0; z-index: 1;
    box-shadow: -15px 0 15px -15px grey inset;
}
.testTD .bar:first-child {
    left: -15px;
}
.testTD .bar:last-child {
    right: -15px;
}

JavaScript

(function () {
    
    "use strict";

    if ( document.documentMode && document.documentMode < 12 ) {
        var spans = document.querySelectorAll( "span.bar" ),
            count = spans.length;
        while ( count-- ) {
            spans[count].style.height = spans[count].parentElement.offsetHeight + "px";
        }
    }

}());