When I have 85 rows in a table dompdf is working properly but when I get more than 85 rows in table rows are not displaying in 3rd page instead of rows are overlapping in 2nd page.
I am using dompdf with codeigniter. I have tried to remove all styles in my code. Tried to use page-break-before: always;page-break-before: avoid;page-break-before: auto;
My dompdf code is -
public function load_view_download($html,$fileName)
{
$dompdf = new Dompdf();
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'potrait');
$dompdf->render();
$time = time();
$dompdf->stream($fileName.'_'.$time);
}
html code is -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="invoice_main_wrapper" >
<div class="invoice" >
<table >
<tbody>
<tr>
<td>
<table >
<thead >
<tr>
<td >#</td>
<td >item</td>
<td>code</td>
<td >tag</td>
<td >MRP</td>
<td >Qty</td>
<td >Price</td>
<td >AMOUNT</td>
</tr>
</thead>
<tbody class="invoice_bd" >
<?php for($i=1;$i<=100;$i++){?>
<tr class="bb_td">
<td ><?=$i?></td>
<td >gafd</td>
<td >adfa</td>
<td >adfdas</td>
<td >1000</td>
<td >10</td>
<td >100</td>
<td >100</td>
</tr>
<?php }?>
<!-- for total -->
<tr class="bb_td">
<td ></td>
<td ></td>
<td ></td>
<td ></td>
<td >Total</td>
<td >121</td>
<td >100</td>
<td >1000</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td >
<table class="subtotal_invoice" style="border-spacing: 0px; float:right;">
<tr>
<td >Total In Words:</td>
<td >Five hundred</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<div class="note" style="font-weight: 600; width:100%;marign-top: 100px;" >
<h5 style="font-size: 14px;font-weight: 400;">
Hello
</h5>
<div style="border-bottom: 1px solid #AFAFAF;">
<h5 style="margin:0;font-size: 14px;font-weight: 400;line-height: 0;"></h5>
</div>
</div>
<!-- footer -->
</div>
controller code is -
$this->content['data']['title'] = 'pdf'
$html = $this->load->view('testpdf', $this->content, true);
$this->pdf->load_view_download($html,'testpdf');
With more than 85 rows i m getting this issue.please check image
https://ibb.co/gD0x7Js
With less than or equal to 85 rows its working fine. please check image
https://ibb.co/qkX0pBg
It is better to use Mpdf, for multiple files. Mpdf converts the HTML to PDF easily
Related
Someone please help me creating a table like this using only HTML.
I can only create the first two rows,but the third one is difficult for me.
This table is just HTML, it's not exactly what you want but it can be helpful for your need.
<table border = "2">
<tbody>
<tr>
<td > 1 </td>
<td colspan = "12"> 2 </td>
</tr>
<tr>
<td rowspan="2"> 3 </td>
<td colspan = "5"> 4 </td>
<td colspan = "5"> 5 </td>
</tr>
<tr>
<td colspan = "3"> 6 </td>
<td colspan = "6" > 7 </td>
<td colspan = "3"> 8 </td>
</tr>
</tbody>
</table>
Your Desired Table :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
table {
border: 5px solid black;
table-layout: fixed;
width: 200px;
border-collapse: collapse;
}
th,
td {
border: 5px solid black;
width: 100px;
overflow: hidden;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td colspan="4">2</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td colspan="2">4</td>
<td colspan="2">5</td>
</tr>
<tr>
<td>6</td>
<td colspan="2">7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
I'm working on a school project, where we have to design a website with html 4.01 and must not use CSS at all. My Question is, how can I expand a table over the whole window height? I have tried the height attribute with a percantage value, but it didn't work. I couldn't find any good solutions for my problem since all of them used inline CSS or the style tag.
here is my code:
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<title>Horse Audio</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tbody><tr bgcolor="#d1bc8a">
<td width="4%">
<center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
</td>
<td>
<font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Contact</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Product</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>FAQ</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="25%">
<center>Search</center>
</td>
</tr>
<tr>
<td colspan="5">
<center>Test</center>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#322c1d">
Test
</td>
</tr>
</tbody></table>
</body>
</html>
If you specify the version as HTML5 and try to set height="...", it won't work. Since in HTML5 there isn't a height-attribute for table, it will be ignored.
Without CSS, the best you can do is:
Try deleting: <!DOCTYPE html>
and then add: height="100%" to <table>.
<html lang="en-GB">
<head>
<title>Horse Audio</title>
</head>
<body>
<table height="100%" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tbody><tr bgcolor="#d1bc8a">
<td width="4%">
<center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
</td>
<td>
<font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Contact</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Product</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>FAQ</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="25%">
<center>Search</center>
</td>
</tr>
<tr>
<td colspan="5">
<center>Test</center>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#322c1d">
Test
</td>
</tr>
</tbody></table>
</body>
</html>
When I run it on Firefox or Chrome, it works just fine.
You should set the height of <body> and <html> to 100% too. Then you can set the height of element with 100%.
body, html {
height: 100%;
}
table {
height: 100%;
}
This is my HTML and i am using XHTML2FO.XSL to transform the same to PDF. But i am getting error : (Location of error unknown)org.apache.fop.fo.ValidationException: "fo:table-row" is missing child elements. Required content model: (table-cell+) (No context info available)
Please help.
HTML:
**
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="3" cellspacing="0" class="nested"
width="100%">
<tbody>
<tr>
<td class="label">Name:</td>
<td class="inputField">TEST-0000 0002</td>
</tr>
<tr>
<td class="label">Type:</td>
<td class="inputField">Change</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="3" cellspacing="0" class="nested"
width="100%">
<tbody>
<tr>
<td class="label">Description:</td>
<td class="inputField"><pre>TEST-CR </pre></td>
</tr>
<tr>
<td class="label">Estimated Completion Date:</td>
<td class="inputField"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
**
This is the XHTMl2FO.XSL:
https://github.com/jeffrafter/xhtml2fo/blob/master/xhtml2fo.xsl
I'm having trouble with getting the height of the leftmost (commented) nested table to automatically size in correspondence with the content on the right. It looks fine in Chrome, but in Word/Outlook it's not stretching.
Does anyone know how to get this working in Word/Outlook?
how it should look
how it actually looks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
th, td {
padding: 0;
}
table.border {
border-collapse: collapse;
border-spacing: 0;
}
.borderOutline {
border: 4px solid #000000;
}
</style>
</head>
<body>
<table class="border" align="center" width="588" height="100%">
<tbody>
<tr valign="top">
<td width="12">
<!--PROBLEM TABLE START-->
<table class="border" width="100%" height="100%">
<tbody>
<tr bgcolor="red"><td> </td></tr>
<tr bgcolor="orange"><td> </td></tr>
<tr bgcolor="yellow"><td> </td></tr>
<tr bgcolor="green"><td> </td></tr>
<tr bgcolor="blue"><td> </td></tr>
<tr bgcolor="purple"><td> </td></tr>
</tbody>
</table>
<!--PROBLEM TABLE END-->
</td>
<td width="576">
<table class="border" width="100%" height="100%">
<tbody>
<tr height="75">
<td class="borderOutline">
<table cellspacing="20" cellpadding="20">
<tbody>
<tr>
<td>HEADER</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="borderOutline">
<table cellspacing="20" cellpadding="20">
<tbody>
<tr>
<td>
<p>BODY</p>
<p>will</p>
<p>contain</p>
<p>variable</p>
<p>amount</p>
<p>of</p>
<p>text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr height="75">
<td class="borderOutline">
<table cellspacing="20" cellpadding="20">
<tbody>
<tr>
<td>FOOTER</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The problem you have is acutally quite common and annoyed a lot of people in the past.
As far as I know, Word and Outlook are using the Internet Explorer Engine, so you will find the unconvinient answer in this thread:
IE display: table-cell child ignores height: 100%
(SPOILER: It's probably not possible)
I have tried different styles but I could not reach a solution,
I need to make it like:
However my code produce the output like follows:
I would like to give some space( same color with background) however either table goes up or does not work at all. I would be happy if someone can help .
here is my code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="extension.css" />
<div class="container">
<div class="jumbotron">
<div class="white"> <table>
<tr>
<td class='magenta'></td>
<td class='magenta'></td>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<tr>
<td class="white"></td>
<td class="white"></td>
</table>
</div>
<div class="white"> <table>
<tr>
<td class='magenta'></td>
<td class='magenta'></td>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<tr>
<td class="white"></td>
<td class=""></td>
</table> </div> <br><br><br>
<div class="white">
<table>
<tr>
<td class=''></td>
<td class='magenta'></td>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<tr>
<td class="white"></td>
<td class="red"></td>
</table>
</div>
<div class="white">
<table>
<tr>
<td class='magenta'></td>
<td class="green"></td>
<tr>
<td class=""></td>
<td class="blue"></td>
<tr>
<td class="red"></td>
<td class="red"></td>
</table>
</div>
</div>
</div>
and CSS. almost none of the display ttypes did work or I am doing a fundamental mistake here
.jumbotron {
background: black;
display:flex;
height: 75vh;
justify-content: center;
align-items: center;
}
table {
width: 30px;
height: 30px;
}
td {
border:1px solid black;
}
jsfiddle: https://jsfiddle.net/m6ucyryb/
According to your requirement, You should use two table. The following code will create a table in HTML. So you have to use 2 times in a code.
<table>
</table>
The requirement contains 3 table row for each table, the following code will create a row in page, so the following code is added three times for each table:
<tr>
</tr>
And each row contains 4 table data. The following code will create one table data, so under each table row, the following code is used four times.
<td class='magenta'></td>
I think you you need some spacing between them, it can be added like giving a margin to an div element:
<div class = "margin"></div>
The final solution will be as follows:
table {
width: 30px;
height: 30px;
}
.margin {
margin-top:5px;
}
td {
border:1px solid black;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
.white{
background-color:white;
}
.magenta{
background-color:magenta;
}
.cyan{
background-color:cyan;
}
.black{
background-color : Black;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="extension.css" />
</head>
<body>
<table>
<tr>
<td class='magenta'></td>
<td class='magenta'></td>
<td class='magenta'></td>
<td class='magenta'></td>
</tr>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<td class="yellow"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="white"></td>
<td class="white"></td>
<td class="white"></td>
<td class="white"></td>
</tr>
</table>
<div class = "margin"></div>
<table>
<tr>
<td class="white"></td>
<td class='magenta'></td>
<td class='magenta'></td>
<td class="green"></td>
</tr>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<td class="white"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="white"></td>
<td class="red"></td>
<td class="red"></td>
<td class="red"></td>
</tr>
</table>
</body>
</html>