I am generating a PDF document using DOMPDF.
The html that is being 'printed to PDF' renders as expected in a browser.
However when using DOMPDF the CSS layout is ignored. Note: When using inline CSS <td style="width:2cm;"> the document renders properly. The desired and resulting outputs are shown below. As is a snippet of the code that renders improperly.
Thanks,
Desired Output:
DOMPDF Output:
<style type="text/css">
td {
display: table-cell;
vertical-align: top;
}
.num {
width: 1cm;
}
.spc {
width: 2cm;
}
.quanda {
width: 8cm;
}
</style>
<div>
<h1>Demographics</h1>
</div>
<div>
<hr/>
</div>
<div>
<table>
<tbody>
<tr>
<td class="num">1)</td>
<td class="quanda">Study ID</td>
<td class="spc"> </td>
<td class="quanda">2349723</td>
</tr>
<tr>
<td class="num">2)</td>
<td class="quanda">Date subject signed consent</td>
<td class="spc"> </td>
<td class="quanda">12 March 2012</td>
</tr>
<tr>
<td class="num">3)</td>
<td class="quanda">Upload the patient's consent form</td>
<td class="spc"> </td>
<td class="quanda">Uploaded: URL: </td>
</tr>
<tr>
<td class="num">4)</td>
<td class="quanda">First Name</td>
<td class="spc"> </td>
<td class="quanda">Bob</td>
</tr>
<tr>
<td class="num">5)</td>
<td class="quanda">Last Name</td>
<td class="spc"> </td>
<td class="quanda">Dylan</td>
</tr>
</tbody>
</table>
</div>
Related
I have made two tables, one of which does not fill the full width of the parent div.
Does anyone have a clue what's wrong? You will find below the JS fiddle code:
https://jsfiddle.net/factorbased/cps3Loa2/6
The issue seems to involve this part but I don't understand how to fix it:
<head>
<style>
table.ReturnsTable {
text-align: right;
width: 100%;
}
.tr_grey{background-color:#C0C0C0;}
.setheight{min-height: 100px; overflow: hidden;}
#pies3 div{float:left;}
#pies4 div{float:left;}
</style>
</head>
<body>
<div id="csvBar12" style="display: none;">
[wbcr_php_snippet id="972"]
</div>
<div id="pies3" class="setheight" width="100%">
<div id="chartdiv3" style="width: 500px; height: 300px; background-color: #FFFFFF;" ></div>
<div><table class="ReturnsTable" border="2">
<tr class="tr_grey"><td>Performance Statistics</td> <td>Portfolio</td> <td>Benchmark</td> <td>Difference</td> </tr>
<tr> <td>3-Month Return (%)</td> <td id="b0"></td> <td id="b1"></td><td id="b2"></td> </tr>
<tr> <td>1-Year Return (%)</td> <td id="b3"></td> <td id="b4"></td> <td id="b5"></td> </tr>
<tr> <td>3-Year Return (%)</td> <td id="b6"></td> <td id="b7"></td><td id="b8"></td></tr>
<tr> <td>5-Year Return (%)</td> <td id="b9"></td> <td id="b10"></td> <td id="b11"></td> </tr>
</table></div>
</div>
<div id="pies4" class="setheight" width="100%">
<div id="chartdiv4" style="width: 500px; height: 300px; background-color: #FFFFFF;" ></div>
<div><table class="ReturnsTable" border="2">
<tr class="tr_grey"><td>Risk Measurements</td> <td>Portfolio</td> <td>Benchmark</td> <td>Difference</td> </tr>
<tr> <td>Standard Deviation (%)</td> <td id="b12"></td> <td id="b13"></td><td id="b14" ></td> </tr>
<tr> <td>Maximum Drawdown (%)</td> <td id="b15" ></td> <td id="b16" ></td> <td id="b17"></td> </tr>
<tr> <td>Sharpe Ratio</td> <td id="b18"></td> <td id="b19"></td><td id="b20"></td></tr>
<tr> <td>Index Correlation</td> <td id="b21"></td> <td id="b22"></td> <td id="b23"></td> </tr>
</table></div>
</div>
</body>
Many thanks,
For example, I want to set the ratio of width of red:green:blue be 1:2:1 relative to parent, I tried using em, which seems got my desired result:
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:2em;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>
but the element doesn't disappear when it has 0em:
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:0em;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>
And according to the description of em, it seems unlikely used to define the relative width/height of element.
Is using em the correct way?If not, what is the correct way to achieve this?
Table element has cellspacing and cellpadding. Set cellpadding="0" like following. It will resolve your issue.
<table style="width:100%;height:50px;" cellpadding="0">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:0em;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>
This is called "cell-padding" simply give your table cell td a padding: 0;
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:1em;">
</td>
<td style="height:100%;background-color:green;width:0em;padding: 0;">
</td>
<td style="height:100%;background-color:blue;width:1em;">
</td>
</tr>
</table>
EDIT: After reading your post again, what you're searching for is percentage. This will allow you to use a percentage of the parents width.
A 1:2:1 ratio will be 25% : 50% : 25%
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:25%;">
</td>
<td style="height:100%;background-color:green;width:50%;">
</td>
<td style="height:100%;background-color:blue;width:25%;">
</td>
</tr>
</table>
<table style="width:100%;height:50px;border-collapse: collapse;">
<tr>
<td style="height:100%;background-color:red;width:50%;">
</td>
<td style="height:100%;background-color:green;width:0;">
</td>
<td style="height:100%;background-color:blue;width:50%;">
</td>
</tr>
</table>
Instead of em you can use %. check snippet below. Also add cellpadding="0"
<table style="width:100%;height:50px;" cellpadding="0">
<tr>
<td style="height:100%;background-color:red;width:25%;">
</td>
<td style="height:100%;background-color:green;width:50%;">
</td>
<td style="height:100%;background-color:blue;width:25%;">
</td>
</tr>
</table>
or you can go with flexbox
ul {
list-style: none;
display: flex;
padding: 0px;
}
li {
flex-grow:1;
}
li.double {
flex-grow: 2;
}
<ul>
<li style="background-color:red;">1</li>
<li class="double" style="background-color:green;">2</li>
<li style="background-color:blue;">3</li>
</ul>
I would insist not using tables for layout purposes and instead use divs but for your answer
<table style="width:100%;height:50px;">
<tr>
<td style="height:100%;background-color:red;width:50%;">
</td>
<td style="height:100%;background-color:green;width:0;">
</td>
<td style="height:100%;background-color:blue;width:50%;">
</td>
</tr>
</table>
I am trying to create a table layout as shown in below image:
Below is my Html code:
<html>
<head>
<meta charset="UTF-8" />
<title>Table sketch</title>
<style>
table {
table-layout: fixed;
width: 20em;
}
td {
width: 4em;
height: 1.5em;
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td colspan="4"> 1 </td>
</tr>
<tr>
<td rowspan="2"> 2 </td>
<td rowspan="2"> 3 </td>
</tr>
<tr>
<td colspan="2"> 4 </td>
</tr>
<tr>
<td> 5 </td><td> 6 </td>
</tr>
<tr>
<td colspan="4"> 7 </td>
</tr>
</table>
</body>
But it generates below layout:
When I change rowspan value from 2 to 3 for second row. It gives me right layout.
<tr>
<td rowspan="3"> 2 </td>
<td rowspan="3"> 3 </td>
</tr>
Here is a link to jsbin.
But why is first html code not working?
Any help is much appreciated.
Thanks.
You have one tr tag too much: The second row has to contain 3 elements (i.e. no separate tr for the third element in that row):
table {
table-layout: fixed;
width: 20em;
}
td {
width: 4em;
height: 1.5em;
text-align: center;
}
<body>
<table border="1">
<tr>
<td colspan="4"> 1 </td>
</tr>
<tr>
<td rowspan="2"> 2 </td>
<td rowspan="2"> 3 </td>
<td colspan="2"> 4 </td>
</tr>
<tr>
<td> 5 </td><td> 6 </td>
</tr>
<tr>
<td colspan="4"> 7 </td>
</tr>
</table>
</body>
I have started to draw a table in HTML. I desired to draw
Observe that 2.2 starts at center of 1.1 and 3.1 starts at center of 2.2.
The code I wrote for this is
<table border="3" width="400" height="200">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
You can see the output. Can any one tell me why the output is not as i desired by suggesting the changes in the code. Thanks in advance.
After going through the comments I found that code is working fine in chrome. Problem is only in Firefox and Edge.
I think you will need to specify cell height in order to get this work.
table {
text-align:center;
border-collapse:collapse;
}
<table border="3" width="400" height="200">
<tr>
<td height="40" rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
Try this style
<style media="screen">
table {
border-collapse: collapse;
}
table, tr, td {
border: 1px solid black;
}
.center {
text-align: center;
}
</style>
and your code for table,
<table width="400" height="200">
<tr>
<td rowspan="2">
<div class="center"> 1.1 </div>
</td>
<td>
<div class="center"> 1.2 </div>
</td>
</tr>
<tr>
<td rowspan="2">
<div class="center"> 2.2 </div>
</td>
</tr>
<tr>
<td>
<div class="center"> 3.1 </div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="center"> 4.1 </div>
</td>
</tr>
<table>
use border-collapse: collapse; to table style
try this code
table{
border-collapse: collapse;
}
td{
text-align:center;
}
<table border="3" width="500" height="300">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
your code is written fine for rowspans, check this if it helps
<table border="3" width="400" height="200">
<tr>
<td rowspan="3">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="3">2.2</td>
</tr>
<tr>
<td style="border: none;"></td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
CSS:
.chash, .java, .php, .jscript, .jQuery, .cplus, .python, .asp, .dotnet, .html,
.objectivec, .iOS, .sql, .css, .rubyr, .c, .xml, .AJAX, .xcode, .linux, .windows,
.vbdotnet, .json, .Apache, .wordpress, .oracle, .Perl, .ActionScript, .flash,
.dothtaccess, .VisualStudio, .GoogleAppEngine, .jsp,. PostgreSQL, .ZendFramework,
.email, .GoogleMaps {
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
margin: 10px;
padding: 5px;
width: 250px;
height: 180px;
}
td {
padding-right: 20px;
margin: 10px;
}
HTML:
<div class="Languages">
<table>
<tr>
<td class="chash"></td>
<td class="java"></td>
<td class="php"></td >
<td class="jscript"></td>
</tr>
<tr>
<td class="jQuery"></td>
<td class="Perl"></td>
<td class="dothtaccess"></td>
<td class="flash"></td>
</tr>
<tr>
<td class="cplus"></td>
<td class="python"></td >
<td class="asp"></td>
<td class="dotnet"></td>
</tr>
<tr>
<td class="html"></td>
<td class="email"></td >
<td class="GoogleMaps"></td>
<td class="ActionScript"></td>
</tr>
<tr>
<td class="objectivec"></td>
<td class="iOS"></td>
<td class="sql"></td>
<td class="ZendFramework"></td>
</tr>
<tr>
<td class="PostgreSQL"></td>
<td class="oracle"></td >
<td class="jsp"></td>
<td class="css"></td>
</tr>
<tr>
<td class="rubyr"></td >
<td class="c"></td>
<td class="xml"></td>
<td class="AJAX"></td>
</tr>
<tr>
<td class="xcode"></td>
<td class="wordpress"></td>
<td class="linux"></td>
<td class="windows"></td>
</tr>
<tr>
<td class="vbdotnet"></td>
<td class="json"></td >
<td class="Apache"></td>
<td class="GoogleAppEngine"></td>
<td class="VisualStudio"></td>
</tr>
</table>
</div>
LIVE DEMO
Here's one way to get some spacing between your table cells. View it on JSFiddle
HTML
<table>
<tr>
<td>
hi
</td>
<td>
hello
</td>
</tr>
</table>
CSS
table {
border-collapse:separate;
border-spacing:10px 10px;
}
and if you're not using HTML5:
HTML4
<table cellspacing="5">