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.
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 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
I am trying to apply a class a TD within a table that I am iterating in PHP. The table generates just fine, and inline styling works, but I can't get the classes to apply from my style sheet.
My header with link to stylesheet
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" media="screen" href="bbapi.css" />
</head>
Here is my table generation which work fine:
<div>
<table class="output-table">
<tr>
<th scope="col">Store #</th>
<th scope="col">Type</th>
<th scope="col">City</th>
<th scope="col">State</th>
<th scope="col">Distance</th>
</tr>
<?php
//ITERATE LOOP TO OUTPUT XML STRING DATA INTO A TABLE
foreach($xmlcont as $url)
{
?>
<tr>
<td><?php echo "{$url->storeId}"?></td>
<td><?php echo "{$url->storeType}"?></td>
<td><?php echo "{$url->city}"?></td>
<td><?php echo "{$url->region}"?></td>
<td><?php echo "{$url->distance}"?></td>
</tr>
<?php
}
?>
</table>
</div>
Stylesheet classes (the color is just for testing atm):
table.output-table td {
background-color:aqua;
}
table.output-table th {
background-color:lime;
}
The goal is to be able to apply one class to the table header rows <th> and another to the <td> rows. For some reason either I am targeting the CSS incorrectly or something else entirely.
You have done all fine. Seems you have defined some styles for td and th in your CSS. I suggest you to try put !important to your styles.
table.output-table th {
background-color:lime!important;
}
But better way is to inspect where is exactly set styles, and remove them
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>
If I have these two tables:
<table>
<tr>
<td>Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
How can I make it so that the two columns have the same width?
I can't combine the tables so thats not an option. I also can't use fixed widths since its dynamic content. Any ideas? Perhaps something in javascript to have the top columns match the width of the lower table? I'm no js expert so I have no idea if thats possible or how to do it. Php is an option on the table as well if theres a way to use that to solve it as well.
Are you able to define css for this dynamic content? Suppose these tables were nested inside a div like so:
<div id="content">
<table>
<tr>
<td>Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
</div>
I would write some css like this:
#content table td { width: 80%; }
I would use a percentage-based width on the 'flowing' column, and buffer it with fixed-width columns if necessary. ie.:
<table style="width: 100%;">
<tr>
<td style="width: 80%;">Small Length Content</td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td style="width: 80%;">Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
You can use CSS to accomplish this. You will have to have the longer content wrap.
td{
width:80%;
}
Try
<table>
<tr>
<td style="width:200px">Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
or add a class to name to the td element and define the style somewhere else like an external file or in header style