1

I have a list of Months which I want to show one per page while printing, so I thought of using page breaks but the issue is I couldn't apply page breaks. I have also tried putting <div class="pagebreak"></div> but I don't understand why it isn't taking effect. Here is my code:

.pagebreak{
  page-break-after: always;
  }
<table class="fc-year-main-table fc-border-separate">
    <tr>
        <td class="fc-year-month-border fc-first"></td>
        <td class="fc-year-monthly-td" style="">
            <div class="fc-year-monthly-name fc-first"><a name="201401" data-year="2014" data-month="0" href="#">January</a></div>
            <div class="fc-row fc-widget-header">
                <table class="fc-year-month-header">
                    <thead>
                        <tr class="fc-year-week-days"></tr>
                        <tr></tr>
                    </thead>
                </table>
            </div>
            <div class="fc-day-grid-container">
                <div class="fc-day-grid"></div>
            </div>
            <div class="fc-year-monthly-footer"></div>
        </td>
        <td class="fc-year-month-border fc-last"></td>

    <tr class="pagebreak">
        <td class="fc-year-month-border fc-first"></td>
        <td class="fc-year-monthly-td" style="">
            <div class="fc-year-monthly-name"><a name="201402" data-year="2014" data-month="1" href="#">February</a></div>
            <div class="fc-row fc-widget-header">
                <table class="fc-year-month-header">
                    <thead>
                        <tr class="fc-year-week-days"></tr>
                        <tr></tr>
                    </thead>
                </table>
            </div>
            <div class="fc-day-grid-container">
                <div class="fc-day-grid"></div>
            </div>
            <div class="fc-year-monthly-footer"></div>
        </td>
        <td class="fc-year-month-border fc-last"></td>
    </tr>

    <tr class="pagebreak">
        <td class="fc-year-month-border fc-first"></td>
        <td class="fc-year-monthly-td" style="">
            <div class="fc-year-monthly-name"><a name="201403" data-year="2014" data-month="2" href="#">March</a></div>
            <div class="fc-row fc-widget-header">
                <table class="fc-year-month-header">
                    <thead>
                        <tr class="fc-year-week-days"></tr>
                        <tr></tr>
                    </thead>
                </table>
            </div>
            <div class="fc-day-grid-container">
                <div class="fc-day-grid"></div>
            </div>
            <div class="fc-year-monthly-footer"></div>
        </td>
        <td class="fc-year-month-border fc-last"></td>
    </tr>

    <tr class="pagebreak">
        <td class="fc-year-month-border fc-first"></td>
        <td class="fc-year-monthly-td" style="">
            <div class="fc-year-monthly-name"><a name="201404" data-year="2014" data-month="3" href="#">April</a></div>
            <div class="fc-row fc-widget-header">
                <table class="fc-year-month-header">
                    <thead>
                        <tr class="fc-year-week-days"></tr>
                        <tr></tr>
                    </thead>
                </table>
            </div>
            <div class="fc-day-grid-container">
                <div class="fc-day-grid"></div>
            </div>
            <div class="fc-year-monthly-footer"></div>
        </td>
        <td class="fc-year-month-border fc-last"></td>
    </tr>

</table>
Theodore K.
  • 5,058
  • 4
  • 30
  • 46
Srujan
  • 93
  • 1
  • 10

1 Answers1

0

The first <tr> had no pagebreak class and its </tr> missing, apart from those issues (fixed them) it works using

@media print {
    tr.pagebreak  { display: block; page-break-before: always; }
}

Seems like pagebreak in tr is a bit tricky, check this question Applying "page-break-before" to a table row (tr)

Working demo:

window.print();
        @media print {
            tr.pagebreak  { display: block; page-break-before: always; }
        }   
<table class="fc-year-main-table fc-border-separate">
    <tr class="pagebreak">
        <td class="fc-year-month-border fc-first"></td>
        <td class="fc-year-monthly-td" style="">
            <div class="fc-year-monthly-name fc-first"><a name="201401" data-year="2014" data-month="0" href="#">January</a></div>
            <div class="fc-row fc-widget-header">
                <table class="fc-year-month-header">
                    <thead>
                        <tr class="fc-year-week-days"></tr>
                        <tr></tr>
                    </thead>
                </table>
            </div>
            <div class="fc-day-grid-container">
                <div class="fc-day-grid"></div>
            </div>
            <div class="fc-year-monthly-footer"></div>
        </td>
        <td class="fc-year-month-border fc-last"></td>
 </tr>
    <tr class="pagebreak">
        <td class="fc-year-month-border fc-first"></td>
        <td class="fc-year-monthly-td" style="">
            <div class="fc-year-monthly-name"><a name="201402" data-year="2014" data-month="1" href="#">February</a></div>
            <div class="fc-row fc-widget-header">
                <table class="fc-year-month-header">
                    <thead>
                        <tr class="fc-year-week-days"></tr>
                        <tr></tr>
                    </thead>
                </table>
            </div>
            <div class="fc-day-grid-container">
                <div class="fc-day-grid"></div>
            </div>
            <div class="fc-year-monthly-footer"></div>
        </td>
        <td class="fc-year-month-border fc-last"></td>
    </tr>

    <tr class="pagebreak">
        <td class="fc-year-month-border fc-first"></td>
        <td class="fc-year-monthly-td" style="">
            <div class="fc-year-monthly-name"><a name="201403" data-year="2014" data-month="2" href="#">March</a></div>
            <div class="fc-row fc-widget-header">
                <table class="fc-year-month-header">
                    <thead>
                        <tr class="fc-year-week-days"></tr>
                        <tr></tr>
                    </thead>
                </table>
            </div>
            <div class="fc-day-grid-container">
                <div class="fc-day-grid"></div>
            </div>
            <div class="fc-year-monthly-footer"></div>
        </td>
        <td class="fc-year-month-border fc-last"></td>
    </tr>

    <tr class="pagebreak">
        <td class="fc-year-month-border fc-first"></td>
        <td class="fc-year-monthly-td" style="">
            <div class="fc-year-monthly-name"><a name="201404" data-year="2014" data-month="3" href="#">April</a></div>
            <div class="fc-row fc-widget-header">
                <table class="fc-year-month-header">
                    <thead>
                        <tr class="fc-year-week-days"></tr>
                        <tr></tr>
                    </thead>
                </table>
            </div>
            <div class="fc-day-grid-container">
                <div class="fc-day-grid"></div>
            </div>
            <div class="fc-year-monthly-footer"></div>
        </td>
        <td class="fc-year-month-border fc-last"></td>
    </tr>

</table>
Community
  • 1
  • 1
Theodore K.
  • 5,058
  • 4
  • 30
  • 46