如何在表格的单元格中实现对角线交叉 tr/td？ [复制]答案

【问题标题】：How to achieve diagonal line cross tr/td not in a cell in a table? [duplicate]如何在表格的单元格中实现对角线交叉 tr/td？ [复制]
【发布时间】：2017-09-24 06:18:17
【问题描述】：

我想生成一个pdf，模板是一个表格，里面有对角线，如下图。怎么可能达到这个效果？

【问题讨论】：

发帖前先搜索。很有可能，以前有人问过：stackoverflow.com/questions/8127035/…
w3schools.com/cssref/css3_pr_transform.asp
@WesFoster 我已经搜索过了。您提供的链接的问题是 td 块中的对角线，而不是交叉 td/tr 块。您能提供更多信息吗？
@MoisheLipsker 谢谢。 css3 是个好主意。但是我怎么能控制起点和终点呢？因为 td 标签的宽度根据其内容是动态的。
@Tangfb 在我提供的链接中，同样的效果可以应用到整个表格。

标签： html css html-table diagonal

【解决方案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;
    }

【讨论】：