How to break a table vertically (not row break) if it exceeds page width while printing

Question

I have a table like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover table-bordered">
    <tbody>
        <tr>
            <td style="color:#339; background-color:#e7ecfe; font-weight:bold; font-size:16px" colspan="100%">Learning Skills</td>
        </tr>
        <tr style="color:white; background-color:#95a5a6">
            <td class="text-center"><b>Assessments</b></td>
            <td></td>
            <td colspan="1" class="text-center"><b>col1</b></td>
            <td colspan="1" class="text-center"><b>col2</b></td>
            <td colspan="1" class="text-center"><b>col3</b></td>
            <td colspan="1" class="text-center"><b>col4</b></td>
            <td colspan="1" class="text-center"><b>col5</b></td>
            <td colspan="1" class="text-center"><b>col6</b></td>
            <td colspan="1" class="text-center"><b>col7</b></td>
            <td colspan="1" class="text-center"><b>col8</b></td>
            <td colspan="1" class="text-center"><b>col9</b></td>
            <td colspan="1" class="text-center"><b>col10</b></td>
            <td colspan="1" class="text-center"><b>col11</b></td>
            <td colspan="1" class="text-center"><b>col12</b></td>
            <td colspan="1" class="text-center"><b>col13</b></td>
            <td colspan="1" class="text-center"><b>col14</b></td>
            <td colspan="1" class="text-center"><b>col15</b></td>
            <td colspan="1" class="text-center"><b>col16</b></td>
            <td colspan="1" class="text-center"><b>col17</b></td>
            <td colspan="1" class="text-center"><b>col18</b></td>
            <td colspan="1" class="text-center"><b>col19</b></td>
            <td colspan="1" class="text-center"><b>col20</b></td>
            <td colspan="1" class="text-center"><b>col21</b></td>
            <td colspan="1" class="text-center"><b>col22</b></td>
            <td colspan="1" class="text-center"><b>col23</b></td>
            <td colspan="1" class="text-center"><b>col24</b></td>

        </tr>
        <tr>
            <td></td>
            <td class="text-center">something</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">another</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">assess</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">single</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">sgsgsdgfsd</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
    </tbody>
</table>

Image for very wide table

While printing this table I want that the columns which do not fit page width should come in next available space below. Something like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover table-bordered">
    <tbody>
        <tr>
            <td style="color:#339; background-color:#e7ecfe; font-weight:bold; font-size:16px" colspan="100%">Learning Skills</td>
        </tr>
        <tr style="color:white; background-color:#95a5a6">
            <td class="text-center"><b>Assessments</b></td>
            <td></td>
            <td colspan="1" class="text-center"><b>col1</b></td>
            <td colspan="1" class="text-center"><b>col2</b></td>
            <td colspan="1" class="text-center"><b>col3</b></td>
            <td colspan="1" class="text-center"><b>col4</b></td>
            <td colspan="1" class="text-center"><b>col5</b></td>
            <td colspan="1" class="text-center"><b>col6</b></td>
            <td colspan="1" class="text-center"><b>col7</b></td>
            <td colspan="1" class="text-center"><b>col8</b></td>
            <td colspan="1" class="text-center"><b>col9</b></td>
            <td colspan="1" class="text-center"><b>col10</b></td>
            <td colspan="1" class="text-center"><b>col11</b></td>
            <td colspan="1" class="text-center"><b>col12</b></td>

        </tr>
        <tr>
            <td></td>
            <td class="text-center">something</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">another</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">assess</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">single</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">sgsgsdgfsd</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
    </tbody>
</table>

<table class="table table-hover table-bordered">
    <tbody>
        <tr>
            <td style="color:#339; background-color:#e7ecfe; font-weight:bold; font-size:16px" colspan="100%">Learning Skills</td>
        </tr>
        <tr style="color:white; background-color:#95a5a6">
            <td class="text-center"><b>Assessments</b></td>
            <td></td>
            <td colspan="1" class="text-center"><b>col13</b></td>
            <td colspan="1" class="text-center"><b>col14</b></td>
            <td colspan="1" class="text-center"><b>col15</b></td>
            <td colspan="1" class="text-center"><b>col16</b></td>
            <td colspan="1" class="text-center"><b>col17</b></td>
            <td colspan="1" class="text-center"><b>col18</b></td>
            <td colspan="1" class="text-center"><b>col19</b></td>
            <td colspan="1" class="text-center"><b>col20</b></td>
            <td colspan="1" class="text-center"><b>col21</b></td>
            <td colspan="1" class="text-center"><b>col22</b></td>
            <td colspan="1" class="text-center"><b>col23</b></td>
            <td colspan="1" class="text-center"><b>col24</b></td>

        </tr>
        <tr>
            <td></td>
            <td class="text-center">something</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">another</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">assess</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">single</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
        <tr>
            <td></td>
            <td class="text-center">sgsgsdgfsd</td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
            <td colspan="1" class="text-center"></td>
        </tr>
    </tbody>
</table>

Image for table splitted vertically

I don't want to use any other extensions, I just want to use HTML, JavaScript, jQuery, CSS.

This should help : https://stackoverflow.com/questions/26777317/printing-html-table-with-many-columns-rows-using-css-layout Let me know if it doesn't work. — jobless91, Aug 30 '17 at 13:09
@jobless91 I don't want to change the orientation of the page and also I have to use Table not DIVs due to functional requirement. — Prakash Kumar, Aug 30 '17 at 14:47
@Prakash Kumar I have same problem. Can you post the solution to this problem how you solved it. — sd077, Mar 04 '21 at 04:49
Instead of using browser's print feature directly, I added a Print button on UI. On click of button, I added lot of javascript code which would calculate page width, each cell width, then calculate how many cells can fit etc... Based on this calculation, I rendered a new table which is only visible while printing (using css) and the original table would be hidden while printing. After all this, my print button would call browser's print function — Prakash Kumar, Mar 05 '21 at 15:50

How to break a table vertically (not row break) if it exceeds page width while printing

0 Answers0