html - Couldn't apply pagebreak -


i have list of months want show 1 per page while printing, thought of using page breaks issue couldn't apply page breaks. have tried putting <div class="pagebreak"></div> don't understand why isn't taking effect. here 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>

the first <tr> had no pagebreak class , </tr> missing, apart issues (fixed them) works using

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

seems pagebreak in tr bit tricky, check question applying "page-break-before" 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>


Comments

Popular posts from this blog

gridview - Yii2 DataPorivider $totalSum for a column -

java - Suppress Jboss version details from HTTP error response -

Sass watch command compiles .scss files before full sftp upload -