JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.useragentman.com/shared/js/EventHelpers.js"></script>
<script src="http://www.useragentman.com/shared/js/cssQuery-p.js"></script>
<script src="http://www.useragentman.com/shared/js/jcoglan.com/sylvester.js"></script>
<script src="http://www.useragentman.com/shared/js/cssSandpaper.js"></script>
<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');
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
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);';
sDomTemp += '-sand-transform: rotate(-'+nAnglSex+'deg);';
nHyp2 = (nHyp/2);
nCatOp = Math.sin(nAnglRad)*nHyp2;
nCatAd = Math.sqrt((nHyp2*nHyp2) - (nCatOp*nCatOp));
sDomTemp += 'margin-top: -'+nCatOp+'px;';
sDomTemp += 'margin-left: -'+(nHyp2-nCatAd)+'px;';
sDomTemp += '"></b>';
jTemp.append(sDomTemp);
});
});