I have a problem - I am trying to include a background image using CSS for the layer, but it doesn't work...
The CSS file looks like this
header {
background-image: url("boisko.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
The main file looks like this
<?php
error_reporting(0);
echo "<style>";
include "styl.css";
echo "</style>";
echo "<table cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">
<tr>
<td width=\"100%\" colspan=\"2\">";
include_once"Naglowek/index.php";
echo"<td>
</tr>
<td width=\"100%\" colspan=\"2\">";
include_once"Jezyk/index.php";
echo"</td>
</tr>
</table>";
?>
The background image should show in the cell where "Naglowek.index.php" is included, but it doesn't... That file looks like this:
<?php echo "<head><br><h1>Cracow Sunday Football League</h1><br><br></head>";?>
I know I could have written that file in html, but I would prefer it staying in php if it doesn't really matter.
Why doesn't my background image show up?
You have header in the CSS, but head in the HTML
Well you kind of have the right idea. You can save your file as a .php and still write the HTML that is needed.
Change the pages to look like this.
Main Page:
`<?php
<html>
<head>
<!-- title for the document, scripts, styles, meta information,and more -->
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" colspan="2">
<?php include_once"Naglowek/index.php"?>
<td>
</tr>
<td width="100%" colspan="2">
<?php include_once"Jezyk/index.php"; ?>
</td>
</tr>
</table>
?>`
As for the CSS I don't see anything class or ID called header so nothing is going to be applied.
<div class="header"></div>
As for the "Naglowek.index.php" file, it can stay the same as it being a .php file you just don't need the tags. Just straight HTML will work.
`<head><br><h1>Cracow Sunday Football League</h1><br><br></head>`
You should get rid of the head tags because they are a container for all the head elements.
I hope this helps clear things up
Related
I'm trying to align images to the bottom of a td element to achieve something like this (the three images, independently from the height of the other images, will be always on the bottom of the td):
Expectative:
With the following markup:
<?php
// create some HTML content
$html = '<h1>Image alignments on HTML table</h1>
<table cellpadding="0" cellspacing="0" border="1" style="text-align:center;">
<tr>
<td width="33%">
<img src="signature1.png" border="0" align="bottom"/>
</td>
<td width="33%">
<img src="signature2.png" border="1" align="bottom" style="margin-bottom: 0px;" />
</td>
<td width="33%" align="bottom">
<img src="signature3.png" border="0" align="bottom" style="padding: 5px;" />
</td>
</tr>
</table>';
// output the HTML content
$pdf->writeHTML($html, true, false, true, false, '');
//Close and output PDF document
$pdf->Output('example_006.pdf', 'I');
However TCPDF doesn't support padding nor margin rules and i'm getting the following result:
Reality:
In the official documentation there's the align bottom property but it doesn't work.
Note: it's worth to say that the images don't have transparent pixels
around them (on top or bottom where it matters ... ) e.g:
Thanks in advance !
Pitifully TCPDF ended up without support for padding or margin, which means that what i needed wasn't technically possible. I decided to move to Dompdf that allows this behaviour using CSS rules (specifically vertical align, mentioned in this article).
I have 5-10 table in pdf in which I am showing all the records of that table and each have approx 1000-2000 records. I have try to use below code to make footer on each page but instead of that its showing after completion of table. My template looks like below
<page backtop="0" backbottom="30mm" footer="page" style="font-size: 9pt">
<table>
<Records>
</table>
<page_footer>
<table class="page_footer" style="width: 100%;">
<tr>
<td style="width: 80%; text-align:center">
<p style='font-size: 6pt;color:red;'>
...Content...
</p>
</td>
</tr>
</table>
</page_footer>
You can add custom header and footer by using mixture of tcPDF and wkhtml2pdf. Here is an example html2pdf/tcpdf/example . Here is another example html2fpdf/discussion/thread
mPDF: Hide table row (CSS display:none) not work.
Do you have any suggest?
My code:
<table align="center">
<tr style="display:none">
<td valign="top" align="left">InfoOption1:</td>
<td valign="top" align="left" colspan="2">#InfoOption1</td>
</tr>
</table>
I feel very dirty for posting this suggestion, but it's the best I got working:
<tr><td>...</td></tr>
<div style="display: none;">
<tr><td>...</td></tr>
</div>
The DIV is the working part. Luckily, html validnes for seo isnt relevant for mPDF
It works if you enclose the row you want to hide inside a Div. The div will have a class which have declared hidden property.
<div class='hide_this_row'>
<tr>
<td>...</td>
</tr>
</div>
<!-- CSS file will look like this -->
<style>
.hide_this_row{
display :none;
}
</style>
heyy.. I am new to php.. I am trying to convert a page containing nested tables into pdf.. this is the page i need to convert
<!DOCTYPE html>
<html>
<body>
<div style="margin-left: auto; margin-right: auto; width: 75%">
<table width="1000" border="1" bordercolor="#500000">
<tr>
<td colspan="2" style="background-color:#500000;">
<h1 style="text-align:center;"><font color="#FFFFFF">COMPANY NAME</font></h1>
<h2 style="text-align:center;"><font color="#FFFFFF">BALANCE SHEET</font></h2>
<h3 style="text-align:center;"><font color="#FFFFFF">DATE</font></h3>
</td>
</tr>
<tr>
<th width="50%">ASSETS</th>
<th width="50%">LIABILITIES</th>
</tr>
</tr>
<tr>
<!-- <td width="480"><?php include('assets.php') ?></td>
<td width="480">fadffd</td> -->
<td><iframe src="assets.php" frameborder="0" width="500" height="500"></iframe></td>
<td><iframe src="liabilities.php" frameborder="0" width="500" height="500"></iframe></td></tr>
<tr>
<td colspan="2" style="background-color:#500000;text-align:center;"><font color="#FFFFFF">lkfjsdgjljsglhlhfsaj</font></td>
</tr>
</table>
</div>
</body>
</html>
here i have included two tables as table data using iframe.. when i try to import it to pdf using the code shown below, the nested tables are not displayed.
<?php
include("MPDF53/MPDF53/mpdf.php");
$mpdf=new mPDF('win-1252','A4','','',15,10,16,10,10,10);//A4 page in portrait for landscape add -L.
$mpdf->SetHeader('|Your Header here|');
$mpdf->setFooter('{PAGENO}');// Giving page number to your footer.
$mpdf->useOnlyCoreFonts = true; // false is default
$mpdf->SetDisplayMode('fullpage');
// Buffer the following html with PHP so we can store it to a variable later
ob_start();
?>
<?php include "balancesheet.php";
//This is your php page ?>
<?php
$html = ob_get_contents();
ob_end_clean();
// send the captured HTML from the output buffer to the mPDF class for processing
$mpdf->WriteHTML($html);
//$mpdf->SetProtection(array(), 'user', 'password'); uncomment to protect your pdf page with password.
$mpdf->Output();
exit;
?>
please help..
Are you sure that you want to use mpdf? There are several other options. For example, dompdf explicitly supports complex tables. And you can see some other options in this answer
I want to print a large HTML table without breaking it's rows at the end of each page. I used following code, but its not working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
#media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
<body>
<table border="1">
<?php
for($i=0;$i<50;$i++){
?>
<tr>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
</tr>
<?php
}
?>
</table>
</body>
</html>
Can somebody help?
you could try using orphans to specify the number of empty lines to be left at the bottom of a page; if an element's layout conflicts with an orphans setting, the element will be printed on the next page. browser support is pretty shoddy though. i would set it on tr for your example, like this:
tr{orphans:3}
Try
<table border="1">
<?php for($i=0;$i<50;$i++) { ?>
<tr>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
</tr>
<?php } ?>
</table>
You have table tag inside for loop put it before for loop.
I'm late coming to this discussion, but I had a similar problem and this was the closest discussion I could find. I've solved my own problem, and want to share it with the next guy.
I need to print a large table that is divided into segments of rows. Each segment begins with a segment header row, followed by about 5 data rows. I don't want page breaks within any segment, but I do want columns to line up across the entire table. The CSS "page-break-inside:avoid" property only works on top-level block elements, so I can't use <div> within a <table> to control pagination.
But I can use <tbody>! Apparently, in modern browsers the <table> element is just a control feature for grouping the various table parts, not a block element at all, and <tbody> is the actual block element. So page-break-inside:avoid works on it. Also, its legal to have multiple <tbody> tags within a single <table>.
So that's the secret: Use use a separate <tbody> for each segment of the table, each with the "page-break-inside:avoid" CSS property.
There are some complications. First, IE11 seems to require an "orphans:5" CSS property for this to work. Second, I tried using <thead> for the segment header row, giving it a "page-break-after: avoid" attribute, but I ran into a lot of cross-browser issues so I ended up just putting the segment headers inside their corresponding <tbody> tags. It works fine.
CSS:
tbody.segment {
page-break-inside: avoid;
orphans: 5;
}
th.segment {
border: thin solid black;
}
HTML:
<table>
<tbody class="segment">
<tr><th class="segment" colspan="3">Segment 1</th></tr>
<tr><td>data1aa</td><td>data1ab</td><td>data1ac</td><tr>
...
<tr><td>data1za</td><td>data1zb</td><td>data1zc</td><tr>
</tbody>
<tbody class="segment">
<tr><th class="segment" colspan="3">Segment 2</th></tr>
<tr><td>data2aa</td><td>data2ab</td><td>data2ac</td><tr>
...
<tr><td>data2za</td><td>data2zb</td><td>data2zc</td><tr>
</tbody>
</table>
All of the popular desktop browsers that aren't webkit-based (i.e. Firefox and Internet Explorer) now support the CSS declaration page-break-inside: avoid; on the <tr> element, which solves the OP's problem in those browsers. Webkit support is apparently limited to block elements, so the problem technically hasn't been solved yet for Chrome, Safari and Opera (and I'm pretty sure none of the other solutions posted here will help). However, it is possible to simulate the desired behavior by turning the table into a stack of unbreakable blocks. If fixed column widths are used, then this can be done with pure CSS, like so:
<style>
table {border-collapse: collapse;}
table > tbody > tr {
display: block;
page-break-inside: avoid;
}
table > tbody > tr > td {
border: 2px solid black;
width: 100px;
max-width: 100px;
}
table > tbody > tr:first-child ~ tr > td {border-top: none;}
</style>
<table>
<tr>
<td>data</td>
<td>data</td>
<td>Multiple<br/>lines of<br/>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>Multiple<br/>lines of<br/>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>Multiple<br/>lines of<br/>data</td>
</tr>
</table>
If you don't want to use fixed column widths, then you'll have to use javascript to ensure the column widths won't vary from row to row. My answer to another post demonstrates one way to do this, but it includes repeating table headers, which makes it much more complicated than it needs to be in this case. Still might be worth a look, though.