I am adding a feature in my project wherein users can convert their data into pdf, but i am having a problem with css. How can i adjust this div so that it will align in the border of my table? padding and margin does not work since the table cell also adjusts. or a im adding the wrong px? I displayed the table border so that you can see how far the border of the div is. Here's the code
<table border="" style="border-collapse: collapse;font-size:12px;text-align: left;">
<tr>
<td colspan="2">
<b>Email </b>
<div style="display: inline-block;border-bottom:.7px solid black;height:15px;padding:0px;width:200px;overflow:hidden;">
{!! $usermodel->email !!}
</div>
</td>
</tr>
</table>
If you want to align the div with the border of the table, you can add a vertical-align property to the td element with a value of top. This will align the top of the div with the top of the table cell.
You can also try setting the height of the td element to the height of the div plus any additional padding you want to add. This will ensure that the entire div is contained within the table cell.
<table border="" style="border-collapse: collapse;font-size:12px;text-align: left;">
<tr>
<td colspan="2" style="vertical-align: top; height: 30px;">
<b>Email </b>
<div style="display: inline-block; border-bottom: .7px solid black; height: 15px; padding: 7.5px 0; width: 200px; overflow: hidden;">
{!! $usermodel->email !!}
</div>
</td>
</tr>
</table>
Since you are using running styles, on this occasion, I suggest (perhaps could be bettered):-
<table border="" style="border-collapse: collapse;font-size:12px;text-align: left;">
<tr>
<td colspan="2"; style="font-size:18px; padding: 2px" >
<b><sup>Email </sup></b>
<div style="font-size:15px;padding: 2px 0px 2px; border-bottom: 1px solid black; display:inline-block; width: 220px; overflow: hidden;">
{!! $blackmamba#gmail.com !!}
</div>
</td>
</tr>
</table>
Try doing it in an external CSS stylesheet.
I´m using DomPDF to generate a PDF in PHP. I need to put 2 tables side by side.
<table style=" border: 1px solid black !important;">
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">names</td>
<td style=" border: 1px solid black !important;">salary</td>
</tr>
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Pedro</td>
<td style=" border: 1px solid black !important;">1500</td>
</tr>
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Jhon</td>
<td style=" border: 1px solid black !important;">450</td>
</tr>
</table>
<table style=" border: 1px solid black !important;">
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Brand</td>
<td style=" border: 1px solid black !important;">Color</td>
</tr>
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Ferrari</td>
<td style=" border: 1px solid black !important;">Green</td>
</tr>
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Daewoo</td>
<td style=" border: 1px solid black !important;">Blue</td>
</tr>
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Chevrolet</td>
<td style=" border: 1px solid black !important;">Gray</td>
</tr>
</table>
I tried to put display:inline-block; on the tables but I've got a FatalThrowableError.
Call to a member function get_cellmap() on null
I tried to change display:inline-block to float:left but I've got something like this
They were "side by side" but just the content moved to right. Borders are wrong.
How can I put 2 tables side by side using DomPDF?.
Setting position:absolute on 2nd table and adjusting per right/left/top/bottom css did the trick for me
I am having a php table which contains information about billing of certain numbers. After generating this table I export it in pdf using mpdf.
If the table has a certain number of rows it breaks the page in a weird way, leading the headers repeat on the next page with no rows.
Here is the format of the table:
The table contains up to 3 headers inside <thead> tags, like this:
<table class="items" width="100%" style="font-size: 9pt; border-collapse: collapse;" cellpadding="8">
<thead>
<tr>
<td width="30.3%">Forbrug</td>
<td width="23.1%">Periode</td>
<td width="10.76%">Tid/MB</td>
<td width="9.28%">Enheder</td>
<td width="12.9%" align="right">I alt</td>
<td width="13.3%" align="right">I alt+<b>moms</b></td>
</tr>
</thead>
rows are added in a while from the database in this way.. nothing special
<tr>
<td>'.$produktNameFromDatabase.'</td>
<td>'.$periodeFromDatabase.'</td>
<td>'.$tidMbFromDatabase.'</td>
<td>'.$enhederFromDatabase.'</td>
<td align="right">'.number_format((float)$produktpris, 2, ',', '.').' kr.</td>
<td align="right"><b>'.number_format((float)$produktpris*(1 + (0.25 * $moms)) - $momsDiscount, 2, ',', '.').' kr.</b></td>
</tr>
with the total lines at the end
<tr>
<td class="blanktotal" colspan="1" rowspan="6"></td>
<td class="blanktotal" colspan="1" rowspan="6"></td>
<td class="totals" colspan="2">Subtotal:</td>
<td class="totals" colspan="2">'.number_format((float)$pris1, 2, ',', '.').' kr.</td>
</tr>
<tr>
<td class="totals1" colspan="2">Moms:</td>
<td class="totals1" colspan="2">'.number_format((float)$pris1*(0.25 * $moms) - $momsTotal, 2, ',', '.').' kr.</td>
</tr>
<tr>
<td class="totals1" colspan="2"><b>TOTAL:</b></td>
<td class="totals1" colspan="2"><b>'.number_format((float)$pris1*(1 + (0.25 * $moms)) - $momsTotal, 2, ',', '.').' kr.</b></td>
</tr>
</tbody>
</table>
!!! EVERYTHING that you have seen by now, including the totals are a part of the table!
Here is the mpdf settings that I have:
In PhP:
$mpdf=new mPDF('win-1252','A4','','',20,15,48,25,10,10);
$mpdf->useOnlyCoreFonts = true; // false is default
$mpdf->SetProtection(array('print'));
$mpdf->SetTitle("Suggestive Title");
$mpdf->SetAuthor("Author");
$mpdf->SetWatermarkText("Faktura");
$mpdf->showWatermarkText = true;
$mpdf->watermark_font = 'DejaVuSansCondensed';
$mpdf->watermarkTextAlpha = 0.1;
$mpdf->SetDisplayMode('fullpage');
In HTML:
$html .= '<!--mpdf
<htmlpageheader name="myheader">
<table width="100%"><tr>
<td width="50%" style="color:#000000;">
<span style="font-weight: bold; font-size: 14pt;">
Company Name
</span>
Company Information
</td>
<td width="50%" style="text-align: right;">
<img src="image.jpg" />
Invoice Information <br />Side: {PAGENO} af {nb}
</td>
</tr></table>
</htmlpageheader>
<htmlpagefooter name="myfooter">
<div style="border-top: 1px solid #000000; font-size: 9pt; text-align: center; padding-top: 3mm; ">
Footer Stuff
</div>
<div style="font-size: 9pt; text-align: center;">
Other Footer Stuff
</div>
</htmlpagefooter>
<sethtmlpageheader name="myheader" value="on" show-this-page="1" />
<sethtmlpagefooter name="myfooter" value="on" />
mpdf-->';
Some styling that I use
body {font-family: sans-serif;
font-size: 10pt;
}
p { margin: 0pt;
}
td { vertical-align: top; }
.items td {
border-left: 0.1mm solid #000000;
border-right: 0.1mm solid #000000;
}
table thead td { background-color: #d4ffaa;
border: 0.1mm solid #000000;
}
.items td.blanktotal {
background-color: #FFFFFF;
border: 0mm none #000000;
border-top: 0.1mm solid #000000;
border-right: 0.0mm solid #000000;
}
.items td.totals {
text-align: right;
border-top: 0.1mm solid #000000;
border-right: 0.0mm solid #000000;
border-left: 0.0mm solid #000000;
}
.items td.totals1 {
text-align: right;
border-top: 0.0mm solid #000000;
border-right: 0.0mm solid #000000;
border-left: 0.0mm solid #000000;
}
The result looks something like this:
This issue occurs only when the number of rows fills the page. If it overflows it is no major issue, because the table headers are still there on the next page (all of them unfortunately, not only the last one) and the rest of the rows are added further.
How can I get rid of those empty rows, in this special case?
Thank you!
!!EDIT: Added more information, code and a better image of the case. Sorry for not doing it at the first time!
!!EDIT #2: I just observed on other examples that had more than 1 page of rows that the <thead>s keep their position on next pages. It happens all the time. Is there a way to disable that so that other <thead>s will just continue on the next page from the top of the page without remembering the position from the previous page?
You need to set headers (and footers) in individual strings, like this:
require_once __DIR__ . '/../vendor/autoload.php';
$stylesheet = '
.table-header{
border: none;
background-color: yellow;
width: 100%;
}
.table-header td{
border-right: 1px solid;
}
.table-body{
border: none;
background-color: transparent;
width: 100%;
}
.table-body td{
border-right: 1px solid;
border-bottom: 1px solid;
}
.table-footer{
border: none;
background-color: transparent;
width: 100%;
}
.table-footer .td-number{
text-align: right;
}
';
/* Sample data */
$html = '<table class="table-body">';
for ($i = 1; $i <= 100; $i++) {
$html.='<tr>
<td width="30.3%">Forbrug '.$i.'</td>
<td width="23.1%">Periode '.$i.'</td>
<td width="10.76%">'.$i.' MB</td>
<td width="9.28%">Val '.$i.'</td>
<td width="12.9%" align="right">I alt '.$i.'</td>
<td width="13.3%" align="right"><b>moms</b> '.$i.'</td>
</tr>';
}
$html.= '</table>';
$header = '<table class="table-header"><tr>
<td width="30.3%">Forbrug</td>
<td width="23.1%">Periode</td>
<td width="10.76%">Tid/MB</td>
<td width="9.28%">Enheder</td>
<td width="12.9%" align="right">I alt</td>
<td width="13.3%" align="right">I alt+<b>moms</b></td>
</tr></table>';
$footer = '<table class="table-footer"><tr>
<td>Footer here</td>
<td class="td-number"><b>Page N. {PAGENO}</b></td>
</tr></table>';
$mpdf = new mPDF('c','A4','','',15,15,18,15,10,5);
$mpdf->mirrorMargins = 1;
/* Declare headers */
$mpdf->SetHTMLHeader($header);
$mpdf->SetHTMLHeader($header,'E');
/* Declare footers */
$mpdf->SetHTMLFooter($footer);
$mpdf->SetHTMLFooter($footer,'E');
$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html);
$mpdf->Output();
I eventually found a solution. Best way to get rid of these things is to replace <thead> tags with <th>. <thead> has a predefined style which makes the table header repeat itself on every page. <th> will make the header stop repeating itself on the next pages (fortunate or unfortunate), but it will eliminate the space caused by the <thead>'s style
I'm making a Wordpress module to reserve a room.
Now I use mPDF to create the contracts of the reservations automatically.
mPDF has problems with creating tables with on every row a border line.
When I create the table and view it in html everything looks fine. But when I create a PDF with mPDF the does not show me the row bottom border.
This is the html code that I use to generate the pdf:
.logo
{
display: inline-block;
width: 130;
height: 146;
align: left;
hspace: 12;
}
.headerText
{
display:inline-block;
text-align: right;
float:right;
}
.header{
padding-bottom: 20px;
}
.table{
border-left: thin solid;
border-right: thin solid;
border-bottom: thin solid #000000;
border-top: thin solid;
}
.table{
margin-top: 10px;
margin-bottom: 10px;
border-collapse: collapse;
}
table tr {
border-bottom: 1px solid black;
}
table tr:last-child {
border-bottom: none;
}
.Cell
{
width: 300px;
}
.firstCell
{
border-left: thin;
border-right: thin solid;
border-bottom: thin;
border-top: thin;
}
.smallCell
{
width:150px;
}
.largeCell
{
width: 450px;
}
.row
{
display: block;
}
.koninklijkeLogo
{
width: 30px;
}
.maxSize
{
width: 600px;
}
<table class="table">
<tr class="row">
<td class="smallCell firstCell">Naam:</td>
<td class="largeCell">{%name%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Adres:</td>
<td class="largeCell">{%adres%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Telefoonnummer:</td>
<td class="largeCell">{%phone%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">E-mailadres:</td>
<td class="largeCell">{%mail%}</td>
</tr>
</table>
Can I resolve the problem by changing some of my code or is this a bug in mPDF?
From this document, it appears that borders for tr elements are supported by the latest version of mPDF (version 6).
Are you using the latest version?
Maybe you can try to apply a bottom border to the cells only, and not the rows? (Just make sure there are no table cellspacing or td cell margins, or you will see gaps in the borders).
In my table I am trying to change the font size. I have tried adding font size in the tag, adding it in the CSS code for the Myposts class, but nothing prevailed. How can I change the font size?
<table width="100%" border="0" class = "Myposts"; align="center" cellpadding="3" cellspacing="1" bgcolor="#686868 " >
<tr>
<td width="6%" align="center" bgcolor="#505050 " ><strong>#</strong></td>
<td width="53%" align="center" bgcolor="#505050 "><strong>Job Description</strong></td>
<td width="15%" align="center" bgcolor="#505050 "><strong>Views</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Replies</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Date/Time</strong></td>
</tr>
you can select table cells in CSS
table.Myposts tr td {
font-size: 18px;
}
.Myposts td {
font-size: 20px;
}
example in jsfiddle: http://jsfiddle.net/Wk28Y/
Please don't consider this an answer, just a different way of thinking about the issue. FIDDLE
You could get rid of the "bold" line by making the first row <th> instead of <td>.
Add the css table styling to your Myposts class.
You note in the title that it is php, but I don't see any php tags. So I assume you're passing php to an html page, thus the css styling would still work for you.
HTML
<table class = "Myposts">
<tr>
<td>#</td>
<td>Job Description</td>
<td>Views</td>
<td>Replies</td>
<td>Date/Time</td>
</tr>
</table>
CSS
table {
width: 100%;
border: 0px solid black;
background-color: #686868;
border-spacing: 1px;
}
table td {
background-color: #505050;
color: white;
text-align: center;
font-weight: bold;
padding: 3px;
font-size: 20px;
}
table tr td:nth-child(1) {
width: 6%;
}
table tr td:nth-child(2) {
width: 53%;
}
table tr td:nth-child(3) {
width: 15%;
}
table tr td:nth-child(4) {
width: 13%;
}
table tr td:nth-child(5) {
width: 13%;
}