1

Here I have requirement to print html tables in different pages at a time. All these tables are inside the same division.Each page of the print should only have a single table next table should come at next page. this is my demo code

HTML

<div id="divTimeTables"><table>
<tbody>
    <tr><td>table1</td></tr>
    <tr><td><table id="tblTeacherTimeTable1"><thead><tr><th>TeacherName</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr></thead><tbody><tr><td>Monday</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td><td>class&Sub2</td></tr><tr><td>Tuesday</td><td>class&Sub2</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></tbody><tr><td>WednessDay</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Thursday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></table></td></tr>
    <tr><td></td></tr>
    <tr><td>table2</td></tr>
    <tr><td><table id="tblTeacherTimeTable2"><thead><tr><th>TeacherName</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr></thead><tbody><tr><td>Monday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Tuesday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></tbody><tr><td>WednessDay</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Thursday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr><tr><td>Friday</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td><td>class&Sub</td></tr></table></td></tr>
    <tr><td></td></tr>
    </tbody>

    </table></div>
<button id="btnPrint">Print</button>
1
  • 1
    and your javascript? Commented May 7, 2015 at 10:21

2 Answers 2

1

If your using CSS print you can just add at the bottom of your first table or anywhere you would like to set a page-break. (just an option thought)

@media print {
    .page-break {page-break-after: initial;}
}
Sign up to request clarification or add additional context in comments.

Comments

0

Use media querys

    <section>
<table id="table1">
    <tbody>
        <tr>
            <td>table1</td>
        </tr>
        <tr>
            <td>
                <table id="tblTeacherTimeTable1">
                    <thead>
                        <tr>
                            <th>TeacherName</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Monday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                        <tr>
                            <td>Tuesday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                    </tbody>
                    <tr>
                        <td>WednessDay</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Thursday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
    </section>
<section>
<table id="table2">
    <tbody>
        <tr>
            <td>table2</td>
        </tr>
        <tr>
            <td>
                <table id="tblTeacherTimeTable2">
                    <thead>
                        <tr>
                            <th>TeacherName</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Monday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                        <tr>
                            <td>Tuesday</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                            <td>class&Sub</td>
                        </tr>
                    </tbody>
                    <tr>
                        <td>WednessDay</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Thursday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                    <tr>
                        <td>Friday</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                        <td>class&Sub</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>
    </section>

css:

@media print {
    section {
        height:25cm;
    }

}

jsfiddle :

http://fiddle.jshell.net/8u9r4xnb/4/show/

2 Comments

Actually I want to take a print out of this tables. Print Preview should be having different pages.
use jqPrint to print specific table

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.