Handlebars - custom CSS on table not working - css

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

White space between td in table in gmail

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

Vertical align for tbody

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>

Conditionally change color of angularjs element?

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;}

First row of table disappears once the column headers are fixed (sticky header)

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

how to make div overflow when there're some tables in the div content

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.

Resources