0

I want to generate a pdf, and the template is a table with diagonal line in it, like as the below picture. How could a achieve this effect?

enter image description here

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Tangfb
  • 183
  • 8
  • 1
    Search before you post. More than likely, it has been asked before: http://stackoverflow.com/questions/8127035/how-to-create-a-diagonal-line-within-a-table-cell – Wes Foster Jul 27 '15 at 01:58
  • http://www.w3schools.com/cssref/css3_pr_transform.asp – Moishe Lipsker Jul 27 '15 at 01:58
  • @WesFoster I have searched. the question of the link you provide is diagonal line in a td block, not a cross td/tr block.could you provide more information about this? – Tangfb Jul 27 '15 at 02:11
  • @MoisheLipsker thank you. css3 is a good thought. but how could I control's begin point and end point? for the td label's width is dynamic based on its content. – Tangfb Jul 27 '15 at 02:13
  • @Tangfb in the link I provided, the same effect can be applied to the entire table. – Wes Foster Jul 27 '15 at 02:17
  • @WesFoster thank you. I reach this based on that that question. – Tangfb Jul 27 '15 at 03:51

1 Answers1

1

I have solve this by js.

html part:

 <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>

and 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;
    }
Tangfb
  • 183
  • 8