DEVHIDE
Login Or Sign up

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

131 Views Asked by At

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.

html css html-table multiple-columns page-break
Original Q&A
0

There are 0 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-TABLE

Related Questions in MULTIPLE-COLUMNS

Related Questions in PAGE-BREAK

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.