Как достичь диагональной линии cross tr/td не в ячейке в таблице?

Question

Я хочу создать pdf-файл, а шаблон - это таблица с диагональной линией, как показано на рисунке ниже. Как можно добиться этого эффекта?

Answer 1

меня решить эту проблему JS.

HTML часть:

<tr> 
      <td colspan="3" class="crossOut"> 
      </td> 
      <td colspan="3"> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2" class="crossOut2"> 
      </td> 
      <td colspan="1"> 
      </td> 
      <td colspan="2"> 
      </td> 
      <td colspan="1"> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2" class="crossOut3"> 
      </td> 
      <td colspan="1"> 
      </td> 
      <td colspan="2"> 
      </td> 
      <td colspan="1"> 
      </td> 
     </tr> 

и JS часть:

$(function() { 
     function drawcrossLine() { 
      var arrJCrossOut = $('.crossOut'); 
      var arryCrossOut2 = $('.crossOut2'); 
      var arryCrossOut3 = $('.crossOut3'); 
      var nheight2 = arryCrossOut2.innerHeight(); 
      var nheight3 = arryCrossOut3.innerHeight(); 
      var jTemp = arrJCrossOut, 
       nWidth = jTemp.innerWidth(), 
       nHeight = jTemp.innerHeight() + nheight2 + nheight3, 
       nHyp = Math.sqrt(nWidth * nWidth + nHeight * nHeight), 
       nAnglRad = Math.atan2(nHeight, nWidth), 
       nAnglSex = nAnglRad * 360/(2 * Math.PI), 
       nCatOp, 
       nCatAd, 
       nHyp2, 
       nCosRadA, 
       nSinRadA; 
      function generateHtml1(angle) { 
       var sDomTemp = ""; 
       sDomTemp = '<b class="child" '; 
       sDomTemp += 'style="width:' + nHyp + 'px;'; 
       sDomTemp += '-webkit-transform: rotate(' + angle + nAnglSex + 'deg);'; 
       sDomTemp += '-moz-transform: rotate(' + angle + nAnglSex + 'deg);'; 
       sDomTemp += '-ms-transform: rotate(' + angle + nAnglSex + 'deg);'; 
       sDomTemp += '-o-transform: rotate(' + angle + nAnglSex + 'deg);'; 
       sDomTemp += 'transform: rotate(' + angle + nAnglSex + 'deg);'; 
       nCosRadA = Math.cos(nAnglRad); 
       nSinRadA = Math.sin(nAnglRad); 
       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)); 
       var paddingTop = nheight3 + nheight2 - nCatOp; 
       sDomTemp += 'margin-top: ' + paddingTop + 'px;'; 
       sDomTemp += 'margin-left: -' + (nHyp2 - nCatAd) + 'px;'; 
       sDomTemp += '"></b>'; 
       return sDomTemp; 
      } 
      jTemp.append(generateHtml1("-")); 
      jTemp.append(generateHtml1("")); 
     } 

     drawcrossLine(); 
     $(window).resize(function() { 
      $(".child").remove(); 
      drawcrossLine(); 
     }); 
    }); 

CSS часть:

.crossOut .child { 
     position: absolute; 
     display: block; 
     height: 1px; 
     background: black; 
    }