print something

printer.html

<style>
    .gwd-page-size {
        width: 620px;
        height: 330px;
    }

    .gwd-div-gpxq {
        position: absolute;
        width: 620px;
        height: 100px;
        text-align: left;
        left: 1px;
        top: 1px;
    }

    .gwd-div-254r {
        width: 620px;
        left: 0px;
        top: 80px;
        height: 120px;
    }

    .gwd-div-w1a4 {
        left: 0px;
        top: 0px;
        height: 77px;
    }

    .gwd-div-ksjy {
        left: 0px;
        top: 201px;
        width: 380px;
    }

    .gwd-div-5504 {
        width: 230px;
        left: 385px;
        top: 200px;
    }

    .gwd-div-hf15 {
        width: 230px;
        height: 50px;
        left: 386px;
        top: 200px;
    }

    .gwd-div-thkb {
        height: 100px;
    }

    .gwd-div-2ltm {
        height: 50px;
        top: 250px;
        left: 386px;
    }

    .gwd-div-md1m {
        width: 620px;
        left: 0px;
        top: 280px;
        height: 25px;
    }

</style>
<!--<table>-->
<!--<tbody>-->
<!--<tr ng-repeat="item in milestoneList track by $index">-->
<!--<td>-->
<!--<div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck" style="padding-bottom: 15px;">-->
<!--<div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="620px"-->
<!--data-gwd-height="330px" style="display: block;">-->
<!--<div class="gwd-page-content gwd-page-size">-->
<!--<div class="gwd-div-gpxq gwd-div-w1a4" style="border: 1px solid;"><h3>{{ item.name }}</h3></div>-->
<!--<div class="gwd-div-gpxq gwd-div-254r" style="border: 1px solid;"><h3>{{ item.data.Description-->
<!--}}</h3></div>-->
<!--<div class="gwd-div-gpxq gwd-div-254r gwd-div-md1m"><h3>Reviewer: <span style="color: red;">{{ item.data.Review }}</span>-->
<!--</h3></div>-->
<!--<div class="gwd-div-gpxq gwd-div-254r gwd-div-ksjy gwd-div-thkb"-->
<!--style="border: 1px solid;"></h3></div>-->
<!--<div class="gwd-div-gpxq gwd-div-254r gwd-div-ksjy gwd-div-5504 gwd-div-2ltm"-->
<!--style="border: 1px solid;"></div>-->
<!--<div class="gwd-div-gpxq gwd-div-254r gwd-div-ksjy gwd-div-5504 gwd-div-hf15"-->
<!--style="border: 1px solid; text-align: center;"><h3>Men Days</h3></div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->

<style>
    @media print {
        .page-break {
            page-break-after: always;
            page-break-inside: avoid;
        }
    }
</style>

<div class="col-md-7" ng-repeat="item in milestoneList track by $index" style="border: 1px solid #000000">
    <div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck" style="padding-bottom: 15px;">
        <div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="620px"
             data-gwd-height="330px" style="display: block;">
            <div class="gwd-page-content gwd-page-size">
                <div class="gwd-div-gpxq gwd-div-w1a4"
                     style="border: 1px solid; background-color: {{ item.data.Color }}; text-align: center;"><h3>{{
                    item.name }}</h3></div>
                <div class="gwd-div-gpxq gwd-div-254r" style="border: 1px solid;"><h3>{{ item.data.Description }}</h3>
                </div>
                <div class="gwd-div-gpxq gwd-div-254r gwd-div-md1m"><h3>Reviewer: <span style="color: red;">{{ item.data.Review }}</span>
                </h3></div>
                <div class="gwd-div-gpxq gwd-div-254r gwd-div-ksjy gwd-div-thkb" style="border: 1px solid;"></div>
                <div class="gwd-div-gpxq gwd-div-254r gwd-div-ksjy gwd-div-5504 gwd-div-2ltm"
                     style="border: 1px solid; text-align: center"><h3>{{item.data.MD}}</h3></div>
                <div class="gwd-div-gpxq gwd-div-254r gwd-div-ksjy gwd-div-5504 gwd-div-hf15"
                     style="border: 1px solid; text-align: center;"><h3>Men Days</h3></div>
            </div>
        </div>
    </div>
    <div class="page-break" ng-if="$index%4 == 4"></div>
</div>