如何在表中的单元格中实现对角线交叉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 part：

$(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 part：

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