I am working on the CSS applied on the table in Handlebars express.
Here's my hbs template to display my table.
<div class="table-1">
<table class="table" cellspacing="0">
<tr>
<th class="left">Item No</th>
<th class="left">Description</th>
<th class="left">Qty</th>
<th class="left"> Unit </th>
<th class="left">Prix</th>
<th class="left">Discount</th>
<th class="left">VAT</th>
<th class="left">Total</th>
</tr>
<tr>
<td> 0000 </td>
<td> Description </td>
<td> 0 </td>
<td> unit </td>
<td> 0.00 </td>
<td> 0 % </td>
<td> 0% </td>
<td> 0.00 </td>
</tr>
<tr>
<td> 0000 </td>
<td> Description </td>
<td> 0 </td>
<td> unit </td>
<td> 0.00 </td>
<td> 0 % </td>
<td> 2.5% </td>
<td> 0.00 </td>
</tr>
<tr style="width: 100%;">
<td colspan="4"></td>
<td colspan="3"> Total gross</td>
<td> 0.00 </td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="3"> Discount </td>
<td> 0.00 </td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="3"> Total Amt </td>
<td> 0.00 </td>
</tr>
</table>
</div>
Here's my css,
<!DOCTYPE html>
<html>
<head>
<style>
.table-1 .left {
text-align: left;
}
.table-1 .table td,
.table-1 .table th {
border: none;
font-weight: 300;
}
.table-1 tr:nth-child(odd) {
background-color: #EEEEEE;
}
.table-1 th,
.table-1 tr:last-child {
background-color: #16e0bb;
color: #FFFFFF;
}
.table-1 tr:last-child>td {
font-weight: 700 !important;
}
</style>
<meta charset="utf-8">
</head>
<body>
{{{body}}}
</body>
</html>
Issue: the CSS is not applied correctly when rendering the PDF template using Handlebars express. Even inline css is not working especially when using HEX color codes.
It seems, that background-color css does not work at all. What other way is there to apply background-color css on the table? To render the pdf, I'm using Handlebars express, puppeteer and NodeJS.
Expected Output:
Actual Output:
Was able to fix the issue above.
Solution: should include 'printBackground: true' in PDF options before generating the PDF from HTML with Puppeteer and NodeJS.
Thank you
Related
I have a table and I send it as html on gmail but there are white gaps in it. It's due to gmail, I suppose. There is white space between two td.
How to remove it?
My code is:
<table>
<tr class="empty"><td></td></tr>
<tr class="empty"><td></td></tr>
<tr>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Company:
</td>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Employee:
</td>
</tr>
//other code
</table>
There is default cell spacing in tables. Set cellspacing="0" in table.
<table cellspacing="0">
<tr class="empty"><td></td></tr>
<tr class="empty"><td></td></tr>
<tr>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Company:
</td>
<td colspan="4" style="background-color: #007C66 !important; color:white !important;">
Employee:
</td>
</tr>//other code
</table>
Here is the DEMO
I have a table separated by thead and tbody. The text I have in tbody is vertically centered. I want to have it displayed at the top of the tbody.
<thead>
<tr>
<td>.... </td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">
<h1>Hi</h1>
<p> Hello!
</p>
</td>
</tr>
</tbody>
I tried doing something like:
tbody { vertical-align:top;}
But that doesnt work
The problem is not with valign as it works correctly, the problem is the element h1 has a margin by default, you should set it to 0:
h1 {
margin: 0;
}
<table border="1">
<thead>
<tr>
<td>.... </td>
<td>.... </td>
</tr>
</thead>
<tbody valign="top">
<tr>
<td>
<h1>Hi</h1>
<p> Hello!</p>
</td>
<td>
A
</td>
</tr>
</tbody>
</table>
Im still pretty new to AngularJS. Im trying to change the color of the table element so that its yellow if the user voted on this choice.
<div ng-show="poll.userVoted">
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table ng-if="choice.text == poll.userChoice.text" style="background-color: yellow; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
<table ng-if="choice.text != poll.userChoice.text" style="background-color: lightblue; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>
This is done by using ng-class.
Use ng-class on your td like this:
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text}">...</td>
that will put the css class yellowstyle on the item when your condition is true.
And in your example:
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table style="width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text, lightbluestyle: choice.text!=poll.userChoice.text}">{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>
with a style.css file that has:
.yellowstyle {background-color: yellow;}
.lightbluestyle {background-color: lightblue;}
I need your help,
I can't seem to figure out as to why the first row in the table (ABC-123-123456) disappears or appears to be hidden once the top columns are fixed. As my work uses IE7 still I need to be able to have a browser compliant sticky column headers.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#data_container {
margin-top: 5px;
width: 100%;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid #ccc;
position: relative;
color: rgb(60,60,60);
font-size: 9pt;
}
#data {
border-collapse:collapse;
border-spacing: 0;
border-right: 1px solid #ccc;
table-layout: fixed;
}
#data th {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#dcdcdc");
font-weight: normal;
}
#data tr {
text-align: center;
}
#data td {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
text-align: left;
padding-left: 6px;
}
#data tr:hover td { background: #f2f2f2; }
#data th, #data td {
height: 20px;
width: 130px;
}
#data tr td:first-child, #data tr th:first-child {
border-left: 0;
}
#data thead tr {
top:expression(this.offsetParent.scrollTop);
position: absolute;
}
#data tr:first-child td {
border-top: 0;
}
</style>
</head>
<body>
<div id="data_container">
<table id="data">
<!-- Table Header -->
<thead>
<tr>
<th data-sort="string">File Number</th>
<th>Test Column</th>
<th>Request Type</th>
<th>Resize This</th>
<th>Firstname</th>
<th>Lastname</th>
<th data-sort="string">Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>ABC-123-942471</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>ABC-123-408126</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-396225</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-385417</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-374250</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-408970</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-404552</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-403102</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>ABC-123-404555</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>ABC-123-406789</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Hyperlink Example</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>Another</td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</body>
</html>
add this
#data tbody{
position: absolute;
top: 24px;
}
Remove position:absolute from #data thead tr.
jsfiddle
My html code with inline css:
<div id="ggicci_syntax_highlighter" style="border: solid 3px black; cursor: text; overflow-x: auto; width: 100%;">
<table id="ggicci_outer_table" cellspacing="0" style="font-family:Consolas;">
<colgroup>
<col style="background-color: #44F;"><!-- You can set font here -->
<col style="background-color: #f4f4f4; width: 100%;">
</colgroup>
<tr>
<td></td><!-- corner -->
<td id="ggicci_language_text" style="font-size:25px; color: #777; font-family: Arial Black;"> <!-- header -->
C++
</td>
</tr>
<tr>
<td>
<table id="ggicci_line_number" style="font-size: 14px; color: #DDD;"><!-- You can set style here -->
<tr>
<td>1:</td>
</tr>
<tr>
<td>2:</td>
</tr>
<tr>
<td>3:</td>
</tr>
<tr>
<td>4:</td>
</tr>
<tr>
<td>5:</td>
</tr>
<tr>
<td>6:</td>
</tr>
<tr>
<td>7:</td>
</tr>
<tr>
<td>8:</td>
</tr>
</table>
</td>
<td>
<table id="ggicci_code_body" style="font-size: 14px; width: 100%;"><!-- You can set style here -->
<tr>
<td style="background: #FFF">
<span style="color:#FF7700; font-weight:bold;">#include</span> <iostream>
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">using</span> namespace std;
</td>
</tr>
<tr>
<td style="background: #FFF">
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">int</span> main()
</td>
</tr>
<tr>
<td style="background:#FFF;">
{
</td>
</tr>
<tr>
<td>
std::cout << <span style="color:#EB2244;">"Hello World!"</span> << std::endl;<span style="color:green;">//write "Hello World!" to console............................................................</span>
</td>
</tr>
<tr>
<td style="background: #FFF"> <span style="color:blue; font-weight:bold;">return</span> 0;</td>
</tr>
<tr>
<td>
}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and I can't make the content in div scroll when the text in a line in the table where the id is "ggicci_code_body" overflows. I'm new to css and now I'm designing a syntax highlighter for programming practice. So any solution? and why this can't work?
Add '<!doctype html>' at the start of html file.