Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Table row no page break when exporting to PDF

Tags:

html

css

pdf

Table row is not making page break when table is exported to PDF. I've tried to make page break on each table row with:

<tr style='page-break-inside:avoid;'>

Table row breaks like this (export to PDF - view inside browser):

enter image description here

I would like table row 'Vrsta blaga/storitve' to stay compact. So, cells are not displayed in non-printable areas, like in the picture above. Is this possible? What styling should I use? Here is my code:

<style>#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%;}
#tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
#tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
</style>
<style>#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
#tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
#tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}</style>
<style>#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
#tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}</style>
<table id='tblArticles'>
<thead>
<th>Vrsta blaga/storitve</th>
                                <th>Interna številka</th>
                                <th>Prodana koda</th>
                                <th>Količina</th>
                                <th>EnM</th>
                                <th>Cena brez DDV</th>
                                <th>Vrednost brez DDV</th>
                                <th>DDV</th>
                                <th>Znesek DDV</th>
                                <th>Vrednost z DDV</th>
</thead>
<tfoot>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
</tfoot>
<tbody style='page-break-inside:avoid;'>
<tr style='page-break-inside:avoid;'>
<td rowspan='2'><label>Mali kuharski mojster</label></td>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/VFdNNE5TIE1L.jpg><br/>
<label>VFdNNE5TIE1L</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>2,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>32,21 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>64,42 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>22,00 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>14,17 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>78,59 €</td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/VjJUOEVaIE1L.jpg><br/>
<label>VjJUOEVaIE1L</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td rowspan='12'><label>Veliki kuharski mojster</label></td>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/NFA1SFFKVks=.jpg><br/>
<label>NFA1SFFKVks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='12'>12,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='12'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='12'>65,69 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='12'>788,28 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='12'>22,00 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='12'>173,42 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='12'>961,70 €</td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/RzZHOFo1Vks=.jpg><br/>
<label>RzZHOFo1Vks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/VUhHOVVZVks=.jpg><br/>
<label>VUhHOVVZVks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/VThWUTdLVks=.jpg><br/>
<label>VThWUTdLVks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/R05YQlNDVks=.jpg><br/>
<label>R05YQlNDVks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/OVQyU1c3Vks=.jpg><br/>
<label>OVQyU1c3Vks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/TTlHUkVOVks=.jpg><br/>
<label>TTlHUkVOVks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/OUtSNUQ2Vks=.jpg><br/>
<label>OUtSNUQ2Vks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/OENQMkNaVks=.jpg><br/>
<label>OENQMkNaVks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/Q1o2Qjc3Vks=.jpg><br/>
<label>Q1o2Qjc3Vks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/V0xNOVJBVks=.jpg><br/>
<label>V0xNOVJBVks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/TjRMOVdBVks=.jpg><br/>
<label>TjRMOVdBVks=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td rowspan='2'><label>Večerja na zajli</label></td>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/Rk5SRFdWVlo=.jpg><br/>
<label>Rk5SRFdWVlo=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>2,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>91,56 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>183,12 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>22,00 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>40,29 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='2'>223,41 €</td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/OEI4V0FSVlo=.jpg><br/>
<label>OEI4V0FSVlo=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td rowspan='10'><label>Za moške, ki mislijo da kosilo pade z neba</label></td>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/VVpETFhUWk0=.jpg><br/>
<label>VVpETFhUWk0=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='10'>10,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='10'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='10'>32,34 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='10'>323,40 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='10'>22,00 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='10'>71,15 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='10'>394,55 €</td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/OUJXREo5Wk0=.jpg><br/>
<label>OUJXREo5Wk0=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/TlA4OVU1Wk0=.jpg><br/>
<label>TlA4OVU1Wk0=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/NlRTOFRQWk0=.jpg><br/>
<label>NlRTOFRQWk0=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/VVRQVTRSWk0=.jpg><br/>
<label>VVRQVTRSWk0=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/WEEzUzZCWk0=.jpg><br/>
<label>WEEzUzZCWk0=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/TVZWUkVNWk0=.jpg><br/>
<label>TVZWUkVNWk0=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/RDlGVTVOWk0=.jpg><br/>
<label>RDlGVTVOWk0=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/TFBBR1pTWk0=.jpg><br/>
<label>TFBBR1pTWk0=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;'>
<td>
<img src=http://localhost:53358/resources/Images/EAN128/QkVYQ1ZKWk0=.jpg><br/>
<label>QkVYQ1ZKWk0=</label><br/>
</td>
<td><input type='checkbox'><br/><label></label><br/></td>
</tr>
</tbody>
</table><br/>
<div style='page-break-inside:avoid;margin-bottom: 30px;'>
<label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
<div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
<table id='tblLeft'>
<th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
<tr>
<td>9,5 %</td><td>0,00 €</td><td>0,00 €</td><td>0,00 €</td>
</tr><tr>
<td>22 %</td><td>1359,22 €</td><td>299,03 €</td><td>1658,25 €</td>
</tr>
</table>
<table id='tblRight'>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>1359,22 €</td>
</tr>
<tr>
<td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>1359,22 €</td>
</tr>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>299,03 €</td>
</tr>
</table>
<label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
<label style='position:absolute;right:0;bottom:20px;'><b>1658,25 €</b></label>
</div></div><br/><br/><br/>
like image 346
FrenkyB Avatar asked Feb 27 '17 05:02

FrenkyB

People also ask

Can you make a PDF with no page breaks?

You can't really remove page breaks in a PDF. What you can do, though, is print the file to a new PDF using the Tile option (and a large enough paper size), to fit multiple pages on a single large page. There is a limit, though, to the maximum size a PDF page can have. Have you tried other options, though?

How do you deal with page breaks when printing a large HTML table?

To fix this just change it to page-break-after:auto. It will break correctly and not create an extra blank page.

How do you put a page-break after an HTML element in CSS?

You can use the CSS property page-break-before (or page-break-after ). Just set page-break-before: always on those block-level elements (e.g., heading, div , p , or table elements) that should start on a new line.

2 Answers

There is nothing wrong with page-break-inside:avoid;, But the bug arises from a visual mindset!

We think when using rowspan there is only one row in the structure of the table, while its not ture. Rows architecture remain as is, only hidden. And its why you thought it is breaking inside when printing, while the fact is page-break-inside:avoid; is working fine & only some borders are hidden.

Even though you can continue with page-break-inside:avoid; in new design, but its better to force separation by breaking after before/after row [page-break-before].

So, Change your table design from rowspan methodology, to inner/nested tables, then Remove all inline page-break rules & just add this in the <style>...</style>:

#tblArticles tr{
   page-break-before: always;
}


            #tblArticles{
                font-size: 12px !important;
                font-family: verdana, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }
            #tblArticles tr{
                page-break-before: always;
            }
            #tblArticles td{
                border: 1px solid black;
                text-align: center;
                /*padding: 8px;*/
                padding: 0;
                margin: 0;
               
            }
            #tblArticles table.inner{
                width: 100%;
                margin: 0;
            }
            #tblArticles table.inner td{
                padding: 0;
                width: 50%;
                margin: 0;
                padding: 0;
                border: 0;
            }
             #tblArticles table.inner tr td{
                border-bottom: 1px solid black;
            }
            #tblArticles table.inner tr:last-child td{
                border-bottom: none;
            }
            #tblArticles th {
                border: 1px solid black;
                text-align: center;
                padding: 8px;
                background-color: #dddddd;
            }
            #tblLeft{
                position:absolute;
                left:0;
                font-size: 10px !important;
                font-family: verdana, sans-serif;
                border-collapse:collapse;
                width:40%;
            }
            #tblLeft td{
                font-size: 10px !important;
                border: 1px solid black;
                text-align: center;
                padding: 8px;
            }
            #tblLeft th {
                font-size: 10px !important; 
                border: 1px solid black;
                text-align: center;
                padding: 8px;
                background-color: #dddddd;
            }
            #tblRight{
                position:absolute;
                right:0;
                font-size: 10px !important; 
                font-family: verdana, sans-serif;
                border-collapse:collapse; 
                width:20%;
            }
            #tblRight td{
                font-size: 10px !important; 
                text-align: center;
                padding: 8px;
            }
        
        <table id='tblArticles'>
            <thead>
                <tr>
                    <th>Vrsta blaga/storitve</th>
                    <th>Interna številka</th>
                    <th>Prodana koda</th>
                    <th>Količina</th>
                    <th>EnM</th>
                    <th>Cena brez DDV</th>
                    <th>Vrednost brez DDV</th>
                    <th>DDV</th>
                    <th>Znesek DDV</th>
                    <th>Vrednost z DDV</th>
                </tr>
            </thead>
            <tfoot>
                <tr style='visibility:hidden;'><td></td></tr>
                <tr style='visibility:hidden;'><td></td></tr>
                <tr style='visibility:hidden;'><td></td></tr>
                <tr style='visibility:hidden;'><td></td></tr>
                <tr style='visibility:hidden;'><td></td></tr>
                <tr style='visibility:hidden;'><td></td></tr>
                <tr style='visibility:hidden;'><td></td></tr>
                <tr style='visibility:hidden;'><td></td></tr>
                <tr style='visibility:hidden;'><td></td></tr>
                <tr style='visibility:hidden;'><td></td></tr>
            </tfoot>
            <tbody>
                <tr>
                    <td><label>Mali kuharski mojster</label></td>
                    <td colspan="2">
                        <table class="inner">
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/VFdNNE5TIE1L.jpg" /><br/>
                                    <label>VFdNNE5TIE1L</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/VjJUOEVaIE1L.jpg" /><br/>
                                    <label>VjJUOEVaIE1L</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                        </table>
                    </td>
                    <td style='overflow: hidden; white-space: nowrap;'>2,00</td>
                    <td style='overflow: hidden; white-space: nowrap;'>KOM</td>
                    <td style='overflow: hidden; white-space: nowrap;'>32,21 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>64,42 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>22,00 %</td>
                    <td style='overflow: hidden; white-space: nowrap;'>14,17 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>78,59 €</td>
                </tr>
                <tr>
                    <td><label>Veliki kuharski mojster</label></td>
                    <td colspan="2">
                        <table  class="inner">
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/NFA1SFFKVks=.jpg" /><br/>
                                    <label>NFA1SFFKVks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/RzZHOFo1Vks=.jpg" /><br/>
                                    <label>RzZHOFo1Vks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/VUhHOVVZVks=.jpg" /><br/>
                                    <label>VUhHOVVZVks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/VThWUTdLVks=.jpg" /><br/>
                                    <label>VThWUTdLVks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/R05YQlNDVks=.jpg" /><br/>
                                    <label>R05YQlNDVks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/OVQyU1c3Vks=.jpg" /><br/>
                                    <label>OVQyU1c3Vks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/TTlHUkVOVks=.jpg" /><br/>
                                    <label>TTlHUkVOVks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/OUtSNUQ2Vks=.jpg" /><br/>
                                    <label>OUtSNUQ2Vks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/OENQMkNaVks=.jpg" /><br/>
                                    <label>OENQMkNaVks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/Q1o2Qjc3Vks=.jpg" /><br/>
                                    <label>Q1o2Qjc3Vks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/V0xNOVJBVks=.jpg" /><br/>
                                    <label>V0xNOVJBVks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/TjRMOVdBVks=.jpg" /><br/>
                                    <label>TjRMOVdBVks=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                        </table>
                    </td>
                    <td style='overflow: hidden; white-space: nowrap;'>12,00</td>
                    <td style='overflow: hidden; white-space: nowrap;'>KOM</td>
                    <td style='overflow: hidden; white-space: nowrap;'>65,69 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>788,28 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>22,00 %</td>
                    <td style='overflow: hidden; white-space: nowrap;'>173,42 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>961,70 €</td>
                </tr>
                <tr>
                    <td><label>Večerja na zajli</label></td>
                    <td colspan="2">
                        <table class="inner">
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/Rk5SRFdWVlo=.jpg" /><br/>
                                    <label>Rk5SRFdWVlo=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/OEI4V0FSVlo=.jpg" /><br/>
                                    <label>OEI4V0FSVlo=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                        </table>
                    </td>
                    <td style='overflow: hidden; white-space: nowrap;'>2,00</td>
                    <td style='overflow: hidden; white-space: nowrap;'>KOM</td>
                    <td style='overflow: hidden; white-space: nowrap;'>91,56 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>183,12 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>22,00 %</td>
                    <td style='overflow: hidden; white-space: nowrap;'>40,29 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>223,41 €</td>
                </tr>
                <tr>
                    <td><label>Za moške, ki mislijo da kosilo pade z neba</label></td>
                    <td colspan="2">
                        <table class="inner">
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/VVpETFhUWk0=.jpg" /><br/>
                                    <label>VVpETFhUWk0=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/OUJXREo5Wk0=.jpg" /><br/>
                                    <label>OUJXREo5Wk0=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/TlA4OVU1Wk0=.jpg" /><br/>
                                    <label>TlA4OVU1Wk0=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/NlRTOFRQWk0=.jpg" /><br/>
                                    <label>NlRTOFRQWk0=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/VVRQVTRSWk0=.jpg" /><br/>
                                    <label>VVRQVTRSWk0=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/WEEzUzZCWk0=.jpg" /><br/>
                                    <label>WEEzUzZCWk0=</label>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/TVZWUkVNWk0=.jpg" /><br/>
                                    <label>TVZWUkVNWk0=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/RDlGVTVOWk0=.jpg" /><br/>
                                    <label>RDlGVTVOWk0=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/TFBBR1pTWk0=.jpg" /><br/>
                                    <label>TFBBR1pTWk0=</label><br/>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://localhost:53358/resources/Images/EAN128/QkVYQ1ZKWk0=.jpg" /><br/>
                                    <label>QkVYQ1ZKWk0=</label>
                                </td>
                                <td><input type='checkbox'><br/><label></label><br/></td>
                            </tr>
                        </table>
                    </td>
                    <td style='overflow: hidden; white-space: nowrap;'>10,00</td>
                    <td style='overflow: hidden; white-space: nowrap;'>KOM</td>
                    <td style='overflow: hidden; white-space: nowrap;'>32,34 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>323,40 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>22,00 %</td>
                    <td style='overflow: hidden; white-space: nowrap;'>71,15 €</td>
                    <td style='overflow: hidden; white-space: nowrap;'>394,55 €</td>
                </tr>
            </tbody>
        </table>
        <br/>
        <div style='page-break-inside:avoid;margin-bottom: 30px;'>
            <label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
            <div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
                <table id='tblLeft'>
                    <th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
                    <tr>
                        <td>9,5 %</td><td>0,00 €</td><td>0,00 €</td><td>0,00 €</td>
                    </tr><tr>
                        <td>22 %</td><td>1359,22 €</td><td>299,03 €</td><td>1658,25 €</td>
                    </tr>
                </table>
                <table id='tblRight'>
                    <tr style='border-bottom:1px solid black !important;'>
                        <td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>1359,22 €</td>
                    </tr>
                    <tr>
                        <td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>1359,22 €</td>
                    </tr>
                    <tr style='border-bottom:1px solid black !important;'>
                        <td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>299,03 €</td>
                    </tr>
                </table>
                <label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
                <label style='position:absolute;right:0;bottom:20px;'><b>1658,25 €</b></label>
            </div></div>
like image 62
BehradKhodayar Avatar answered Nov 15 '22 04:11

BehradKhodayar

there is nothing wrong with page-break-inside

it table should be like the following to work for page-break-inside

<tr style='page-break-inside:avoid;'>
 <td ><label>Mali kuharski mojster</label></td>
 <td class="td">
    <table >
        <tbody>
            <tr> 
                <td>
                    <img src=http://localhost:53358/resources/Images/EAN128/VFdNNE5TIE1L.jpg><br/>
                    <label>VFdNNE5TIE1L</label><br/>
                </td>   
                <td><input type='checkbox'><br/><label></label><br/></td>
            </tr>       
            <tr>
                <td>
                    <img src=http://localhost:53358/resources/Images/EAN128/VjJUOEVaIE1L.jpg><br/>
                    <label>VjJUOEVaIE1L</label><br/>
                </td>
                <td><input type='checkbox'><br/><label></label><br/></td>
            </tr>
        </tbody>
    </table>            
 </td>
 <td style='overflow: hidden; white-space: nowrap;' >2,00</td>
 <td style='overflow: hidden; white-space: nowrap;' >KOM</td>
 <td style='overflow: hidden; white-space: nowrap;' >32,21 €</td>
 <td style='overflow: hidden; white-space: nowrap;' >64,42 €</td>
 <td style='overflow: hidden; white-space: nowrap;' >22,00 %</td>
 <td style='overflow: hidden; white-space: nowrap;' >14,17 €</td>
 <td style='overflow: hidden; white-space: nowrap;' >78,59 €</td>

instead of 

<tr style='page-break-inside:avoid;'>
    <td rowspan='2'><label>Mali kuharski mojster</label></td>
    <td>
        <img src=http://localhost:53358/resources/Images/EAN128/VFdNNE5TIE1L.jpg><br/>
        <label>VFdNNE5TIE1L</label><br/>
    </td>
    <td><input type='checkbox'><br/><label></label><br/></td>
    <td style='overflow: hidden; white-space: nowrap;' rowspan='2'>2,00</td>
    <td style='overflow: hidden; white-space: nowrap;' rowspan='2'>KOM</td>
    <td style='overflow: hidden; white-space: nowrap;' rowspan='2'>32,21 €</td>
    <td style='overflow: hidden; white-space: nowrap;' rowspan='2'>64,42 €</td>
    <td style='overflow: hidden; white-space: nowrap;' rowspan='2'>22,00 %</td>
    <td style='overflow: hidden; white-space: nowrap;' rowspan='2'>14,17 €</td>
    <td style='overflow: hidden; white-space: nowrap;' rowspan='2'>78,59 €</td>
</tr>
<tr style='page-break-inside:avoid;'>
    <td>
        <img src=http://localhost:53358/resources/Images/EAN128/VjJUOEVaIE1L.jpg><br/>
        <label>VjJUOEVaIE1L</label><br/>
    </td>
    <td><input type='checkbox'><br/><label></label><br/></td>
</tr>

Restructure the entire html

<style>#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%;}
   #tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
   #tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
</style>
<style>#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
   #tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
   #tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
</style>
<style>#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
   #tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}
</style>
<style>
    #tblArticles td.td{
        padding: 0px;
    }

    #tblArticles td.td table {
        width: 100%;
    }

    #tblArticles td.td table td{
        border: 0px;
        border-bottom: 1px solid black;
    }


    #tblArticles td.td table tr:last-child td{
        border-bottom: 0px;
        border-top: 0px;
    }

    #tblArticles th.th {
        padding: 0px;   
    }

    #tblArticles th.th table {  
        padding: 0px;
        width: 100%;
    }

    #tblArticles th.th table th{
        border: 0px;
    }

    #tblArticles th.th table th:first-child{
        width: 70%;
        border-right: 1px solid black;
    }

    #tblArticles td.td table tr td:first-child{
        width: 70%;
        border-right: 1px solid black;
    }
</style>
<table id='tblArticles'>
   <thead>
      <th>Vrsta blaga/storitve</th>
      <th class="th"><table><thead><th>Interna številka</th><th>Prodana koda</th></thead></table></th>
      <th>Količina</th>
      <th>EnM</th>
      <th>Cena brez DDV</th>
      <th>Vrednost brez DDV</th>
      <th>DDV</th>
      <th>Znesek DDV</th>
      <th>Vrednost z DDV</th>
   </thead>
   <tfoot>
      <tr style='visibility:hidden;'>
         <td></td>
      </tr>
      <tr style='visibility:hidden;'>
         <td></td>
      </tr>
      <tr style='visibility:hidden;'>
         <td></td>
      </tr>
   </tfoot>
   <tbody style='page-break-inside:avoid;'>
      <tr style='page-break-inside:avoid;'>
         <td ><label>Mali kuharski mojster</label></td>
         <td class="td">
            <table >
                <tbody>
                    <tr> 
                        <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/VFdNNE5TIE1L.jpg><br/>
                            <label>VFdNNE5TIE1L</label><br/>
                        </td>   
                        <td><input type='checkbox'><br/><label></label><br/></td>
                    </tr>       
                    <tr>
                        <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/VjJUOEVaIE1L.jpg><br/>
                            <label>VjJUOEVaIE1L</label><br/>
                        </td>
                        <td><input type='checkbox'><br/><label></label><br/></td>
                    </tr>
                </tbody>
            </table>            
         </td>
         <td style='overflow: hidden; white-space: nowrap;' >2,00</td>
         <td style='overflow: hidden; white-space: nowrap;' >KOM</td>
         <td style='overflow: hidden; white-space: nowrap;' >32,21 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >64,42 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >22,00 %</td>
         <td style='overflow: hidden; white-space: nowrap;' >14,17 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >78,59 €</td>
      </tr>
      <tr style='page-break-inside:avoid;'>
         <td ><label>Veliki kuharski mojster</label></td>
         <td class="td">
            <table >
                <tbody>
                    <tr> 
                        <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/NFA1SFFKVks=.jpg><br/>
                            <label>NFA1SFFKVks=</label><br/>
                        </td>   
                        <td><input type='checkbox'><br/><label></label><br/></td>
                    </tr>       
                    <tr>
                        <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/RzZHOFo1Vks=.jpg><br/>
                            <label>RzZHOFo1Vks=</label><br/>
                        </td>
                        <td><input type='checkbox'><br/><label></label><br/></td>
                    </tr>
                    <tr>
                        <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/VUhHOVVZVks=.jpg><br/>
                            <label>VUhHOVVZVks=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                    </tr>
                     <tr >
                         <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/VThWUTdLVks=.jpg><br/>
                            <label>VThWUTdLVks=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                      </tr>
                      <tr>
                         <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/VThWUTdLVks=.jpg><br/>
                            <label>VThWUTdLVks=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                      </tr>
                      <tr>
                         <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/R05YQlNDVks=.jpg><br/>
                            <label>R05YQlNDVks=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                      </tr>
                      <tr>
                         <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/OVQyU1c3Vks=.jpg><br/>
                            <label>OVQyU1c3Vks=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                      </tr>
                    <tr style='page-break-inside:avoid;'>
                         <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/TTlHUkVOVks=.jpg><br/>
                            <label>TTlHUkVOVks=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                      </tr>
                      <tr style='page-break-inside:avoid;'>
                         <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/OUtSNUQ2Vks=.jpg><br/>
                            <label>OUtSNUQ2Vks=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                      </tr>
                      <tr style='page-break-inside:avoid;'>
                         <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/OENQMkNaVks=.jpg><br/>
                            <label>OENQMkNaVks=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                      </tr>
                      <tr style='page-break-inside:avoid;'>
                         <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/Q1o2Qjc3Vks=.jpg><br/>
                            <label>Q1o2Qjc3Vks=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                      </tr>
                      <tr style='page-break-inside:avoid;'>
                         <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/V0xNOVJBVks=.jpg><br/>
                            <label>V0xNOVJBVks=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                      </tr>
                      <tr style='page-break-inside:avoid;'>
                         <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/TjRMOVdBVks=.jpg><br/>
                            <label>TjRMOVdBVks=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                      </tr>
                </tbody>
            </table>            
         </td>
         <td style='overflow: hidden; white-space: nowrap;' >12,00</td>
         <td style='overflow: hidden; white-space: nowrap;' >KOM</td>
         <td style='overflow: hidden; white-space: nowrap;' >65,69 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >788,28 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >22,00 %</td>
         <td style='overflow: hidden; white-space: nowrap;' >173,42 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >961,70 €</td>
      </tr>





      <tr style='page-break-inside:avoid;'>
         <td ><label>Večerja na zajli</label></td>
         <td class="td">
            <table >
                <tbody>
                    <tr> 
                        <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/Rk5SRFdWVlo=.jpg><br/>
                            <label>Rk5SRFdWVlo=</label><br/>
                        </td>   
                        <td><input type='checkbox'><br/><label></label><br/></td>
                    </tr>       
                    <tr>
                        <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/OEI4V0FSVlo=.jpg><br/>
                            <label>OEI4V0FSVlo=</label><br/>
                        </td>
                        <td><input type='checkbox'><br/><label></label><br/></td>
                    </tr>
                </tbody>
            </table>            
         </td>
         <td style='overflow: hidden; white-space: nowrap;' >2,00</td>
         <td style='overflow: hidden; white-space: nowrap;' >KOM</td>
         <td style='overflow: hidden; white-space: nowrap;' >91,56 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >183,12 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >22,00 %</td>
         <td style='overflow: hidden; white-space: nowrap;' >40,29 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >223,41 €</td>
      </tr>
      <tr style='page-break-inside:avoid;'>
         <td ><label>Za moške, ki mislijo da kosilo pade z neba</label></td>
         <td class="td">
            <table >
                <tbody>
                    <tr> 
                        <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/VVpETFhUWk0=.jpg><br/>
                            <label>VVpETFhUWk0=</label><br/>
                        </td>   
                        <td><input type='checkbox'><br/><label></label><br/></td>
                    </tr>       
                    <tr>
                        <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/OUJXREo5Wk0=.jpg><br/>
                            <label>OUJXREo5Wk0=</label><br/>
                        </td>
                        <td><input type='checkbox'><br/><label></label><br/></td>
                    </tr>
                    <tr>
                         <td>
                            <img src=http://localhost:53358/resources/Images/EAN128/TlA4OVU1Wk0=.jpg><br/>
                            <label>TlA4OVU1Wk0=</label><br/>
                         </td>
                         <td><input type='checkbox'><br/><label></label><br/></td>
                    </tr>   
                  <tr>
                     <td>
                        <img src=http://localhost:53358/resources/Images/EAN128/TlA4OVU1Wk0=.jpg><br/>
                        <label>TlA4OVU1Wk0=</label><br/>
                     </td>
                     <td><input type='checkbox'><br/><label></label><br/></td>
                  </tr>         
                  <tr>
                     <td>
                        <img src=http://localhost:53358/resources/Images/EAN128/NlRTOFRQWk0=.jpg><br/>
                        <label>NlRTOFRQWk0=</label><br/>
                     </td>
                     <td><input type='checkbox'><br/><label></label><br/></td>
                  </tr>         

                  <tr>
                     <td>
                        <img src=http://localhost:53358/resources/Images/EAN128/VVRQVTRSWk0=.jpg><br/>
                        <label>VVRQVTRSWk0=</label><br/>
                     </td>
                     <td><input type='checkbox'><br/><label></label><br/></td>
                  </tr>
                  <tr>
                     <td>
                        <img src=http://localhost:53358/resources/Images/EAN128/WEEzUzZCWk0=.jpg><br/>
                        <label>WEEzUzZCWk0=</label><br/>
                     </td>
                     <td><input type='checkbox'><br/><label></label><br/></td>
                  </tr>
                  <tr>
                     <td>
                        <img src=http://localhost:53358/resources/Images/EAN128/TVZWUkVNWk0=.jpg><br/>
                        <label>TVZWUkVNWk0=</label><br/>
                     </td>
                     <td><input type='checkbox'><br/><label></label><br/></td>
                  </tr>
                  <tr>
                     <td>
                        <img src=http://localhost:53358/resources/Images/EAN128/RDlGVTVOWk0=.jpg><br/>
                        <label>RDlGVTVOWk0=</label><br/>
                     </td>
                     <td><input type='checkbox'><br/><label></label><br/></td>
                  </tr>
                  <tr>
                     <td>
                        <img src=http://localhost:53358/resources/Images/EAN128/TFBBR1pTWk0=.jpg><br/>
                        <label>TFBBR1pTWk0=</label><br/>
                     </td>
                     <td><input type='checkbox'><br/><label></label><br/></td>
                  </tr>
                  <tr>
                     <td>
                        <img src=http://localhost:53358/resources/Images/EAN128/QkVYQ1ZKWk0=.jpg><br/>
                        <label>QkVYQ1ZKWk0=</label><br/>
                     </td>
                     <td><input type='checkbox'><br/><label></label><br/></td>
                  </tr>               
                </tbody>
            </table>
        </td>
         <td style='overflow: hidden; white-space: nowrap;' >10,00</td>
         <td style='overflow: hidden; white-space: nowrap;' >KOM</td>
         <td style='overflow: hidden; white-space: nowrap;' >32,34 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >323,40 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >22,00 %</td>
         <td style='overflow: hidden; white-space: nowrap;' >71,15 €</td>
         <td style='overflow: hidden; white-space: nowrap;' >394,55 €</td>
      </tr>



   </tbody>
</table>
<br/>
<div style='page-break-inside:avoid;margin-bottom: 30px;'>
   <label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
   <div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
      <table id='tblLeft'>
         <th>Stopnja</th>
         <th>Osnova za DDV</th>
         <th>Znesek DDV</th>
         <th>Vrednost z DDV</th>
         <tr>
            <td>9,5 %</td>
            <td>0,00 €</td>
            <td>0,00 €</td>
            <td>0,00 €</td>
         </tr>
         <tr>
            <td>22 %</td>
            <td>1359,22 €</td>
            <td>299,03 €</td>
            <td>1658,25 €</td>
         </tr>
      </table>
      <table id='tblRight'>
         <tr style='border-bottom:1px solid black !important;'>
            <td style='text-align:left;'><b>Skupaj brez DDV:</b></td>
            <td style='text-align:right;'>1359,22 €</td>
         </tr>
         <tr>
            <td style='text-align:left;'><b>Osnova za DDV</b></td>
            <td style='text-align:right;'>1359,22 €</td>
         </tr>
         <tr style='border-bottom:1px solid black !important;'>
            <td style='text-align:left;'><b>DDV:</b></td>
            <td style='text-align:right;'>299,03 €</td>
         </tr>
      </table>
      <label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
      <label style='position:absolute;right:0;bottom:20px;'><b>1658,25 €</b></label>
   </div>
</div>
<br/><br/><br/>

It not entire solution, it gives you an idea, there are still css issues

like image 45
Pavan Kumar Jorrigala Avatar answered Nov 15 '22 05:11

Pavan Kumar Jorrigala
Sign in to Comment

Related questions

Firefox getBoundingClientRect() does not account for transforms
Check for empty or blank links in all html files in root directory using gulp
SVG Oversized on Load
Why are the spaces between these p elements when margin and padding are zero?
How to add a side column to the navbar when its viewed on mobile bootstrap
Some buttons have :focus style applied on click
Copy span text using Clipboard.js
Mobile optimization: Make notification menu with position:absolute scrollable
Safari iOS not loading Javascript file?
I need help to empty text area on particular conditions
Cannot access module from directive template, Angular
How to put semantic ui items into segments in html?
I need help accessing a button inside a div [duplicate]
angularjs cordova base href
All data is gone on page reload. Is there any way to avoid that?
JQuery - find height of div then create loop to overlay div
accessing nested menu items in the scope using json and angularJs
ReactJS + Material-UI: How to use Material-UI’s FlatButton and Dialog in each TableRow?
Uimask changes min max lentgh of ng-minlength
How to center navbar in Bootstrap 4 using Flexbox

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!