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;
display:block;
height:1px;
background:black;
}
JavaScript
$(function(){
var arrJCrossOut = $('.crossOut'),
nVer = $.browser.version.substr(0,1),
bMsie = $.browser.msie;
arrJCrossOut.each(function(i){
var jTemp = $(this),
nWidth = jTemp.innerWidth(),
nHeight = jTemp.innerHeight(),
nHyp = Math.sqrt(nWidth*nWidth + nHeight*nHeight),
nAnglRad = Math.atan2(nHeight,nWidth),
nAnglSex = nAnglRad*360/(2*Math.PI), nCatOp, nCatAd, nHyp2, nCosRadA, nSinRadA,
sDomTemp = '<b class="child" ';
sDomTemp += 'style="width:'+nHyp+'px;';
sDomTemp += '-webkit-transform: rotate(-'+nAnglSex+'deg);';
sDomTemp += '-moz-transform: rotate(-'+nAnglSex+'deg);';
sDomTemp += '-ms-transform: rotate(-'+nAnglSex+'deg);';
sDomTemp += '-o-transform: rotate(-'+nAnglSex+'deg);';
sDomTemp += 'transform: rotate(-'+nAnglSex+'deg);';
nCosRadA = Math.cos(nAnglRad);
nSinRadA = Math.sin(nAnglRad);
//sDomTemp += '-sand-transform: rotate(-'+nAnglSex+'deg);';
sDomTemp += "filter: progid:DXImageTransform.Microsoft.Matrix(M11="+nCosRadA+", M12="+nSinRadA+",M21="+(-1*nSinRadA)+", M22="+nCosRadA+", sizingMethod='auto expand');zoom: 1;";
nHyp2 = (nHyp/2);
nCatOp = nSinRadA*nHyp2;
nCatAd = Math.sqrt((nHyp2*nHyp2) - (nCatOp*nCatOp));
if (bMsie && nVer==8) {
sDomTemp += 'margin-top: -'+nHeight+'px;';
}else if(bMsie && nVer<=7) {
sDomTemp += 'top: '+jTemp.offset().top+'px;';
sDomTemp += 'left: '+jTemp.offset().left+'px;';
sDomTemp += 'margin-left: 1px;';
}else{
sDomTemp += 'margin-top: -'+nCatOp+'px;';
sDomTemp += 'margin-left: -'+(nHyp2-nCatAd)+'px;';
}
sDomTemp += '"></b>';
...