JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="crossOut">A1</td>
        <td>A2 Wide</td>
        <td>B1</td>
    </tr>
    <tr>
        <td>A2 Wide</td>
        <td class="crossOut">A1A_1A_1A1A_A1_A1_A1_A1</td>
        <td>B1</td>
    </tr>
    <tr>
        <td>A2 Wide</td>
        <td>A2 Wide</td>
        <td class="crossOut">B2<br/>Very<br/>Tall</td>
    </tr>
    <tr>
        <td>A2 Wide</td>
        <td>A2 Wide</td>
        <td class="crossOut">B2<br/>Very<br/>Very<br/>Very<br/>Very<br/>Very<br/>Tall</td>
    </tr>
</table>

CSS

table{
    border-width: 1px;
    border-spacing: ;
    border-style: outset;
    border-color: gray;
    border-collapse: collapse;
    background-color: transparent;
}
table th {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: gray;
    background-color: transparent;
    -moz-border-radius: ;
}
table td {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: gray;
    background-color: transparent;
    -moz-border-radius: ;
}
.crossOut .child{
    position:absolute; 
    width:0; 
    height:0;
    border-style:solid;
}
.crossOut .black-triangle{
    z-index:-2;
    border-color: transparent black white white;
}
.crossOut .white-triangle{
    border-color: transparent white white white;
    z-index:-1;
}

JavaScript

$(function(){

    var arrJCrossOut = $('.crossOut');
    
    arrJCrossOut.each(function(i){
    
        var jTemp = $(this),
            nWidth = jTemp.innerWidth(),
            nHeight = jTemp.innerHeight(),
            sDomTemp = '<div class="child black-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+nHeight+'px; "></div>';
        
        sDomTemp += '<div class="child white-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+(nHeight-1)+'px;"></div>';
        
        jTemp.append(sDomTemp);
    });
});