All of this is made with angular 12 and with ngx-print library
I have tabular data that I needs to display and I achieved the look and feel with HTML :
<div id="changeOrder">
<body>
<div *ngIf="allReports">
<!-- style="size: A4; display: block;height: 100%;" -->
<table style="size: A4; height: 100%;" *ngFor="let item of response">
<!-- Here the header starts -->
<div class="">
<div class="">
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="" style=" border-bottom: 1px solid black;">
<div class="">
<div class="">
<img src="../../../../../../../assets//img/logo_rr.png" alt="Logo"
style="height: 50px;" />
</div>
<table style="width:100%;">
<thead class="" style="width:100%;">
<tr>
<td style="width:155px;">
<h2>Change Order</h2>
</td>
<td>
<h2>{{item.CHANGEORDERID}} </h2>
</td>
</tr>
</thead>
</table>
</div>
</div>
</td>
</tr>
</div>
</div>
<!-- Here the header Ends -->
<tbody style="display: block;height: 100%;">
<tr>
<td>
<h3>Tasks</h3>
<table style="size: A4; height: 100%;">
<thead>
<tr>
<td>
<b>Name</b>
</td>
<td style="width:400px">
<b>Description</b>
</td>
<td>
<b>Status</b>
</td>
<td>
<b>Due Date</b>
</td>
</tr>
</thead>
<tbody *ngFor="let child of item.taskChild;">
<tr>
<td>{{ child.TDOTNUMBER }} </td>
<td style="width:400px">{{child.TASKSUMMARY}} </td
<td>{{child.TSTATUS}}</td>
<td>{{child.TDUEDATE_ORIG_TYPE}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr class="outer-row">
<td>
<div class="page-footer-space">
<!-- <b>Printed On</b> {{printedDate}} -->
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</div>
and with this CSS :
.page-footer-space,
.page-footer {
height: 100px;
}
.page-footer {
position: fixed;
bottom: 0px;
/* width: 100%; */
}
.page {
page-break-after: always;
}
#page {
margin: 10mm !important;
size: landscape;
}
#media print {
table {
font-size: .8rem;
width: 100%;
height: 90vh;
border: solid;
table-layout: fixed;
}
tbody {
margin: 10mm;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
}
Basically the data when it gets printed it look great,sometimes each report occupies more than 1 page, but what I need to achieve is that whenever an item of response is finished it does not matter at what point of the printing page it finished, the rest of the page needs to be blank and then the next item in the iteration should be printing.
I have not been successful in achieving that break-page at the end of the table.
This is how it currently looks:
Related
I would like to create a html template that when print in chrome browser, the header and footer will fixed on the top and bottom of the page. The tbody will be in between of header and footer. It's height is the total height after minus header and footer. If the tbody exceed the height, it will break into next page. Now, I am having issue that when printing the html template, the tbody will overlap the tfoot and thead on the next page, as shown in these pictures. Please kindly advice. My html template is on the below github link.
.
The HTML is in my github repository. Please help to check on this link.
MyTemplate
Below is my code and my reference for dealing page break for large html table.
Reference
This is a short snippet of my code structure
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
html,
body,
* {
margin: 0;
padding: 0;
}
table {
page-break-inside: auto;
border-collapse: collapse;
}
tr {
page-break-inside: avoid;
page-break-after: auto
}
td {
page-break-inside: avoid;
page-break-after: auto
}
div {
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group
}
/* tbody {
display: table;
width: 100%;
table-layout: fixed;
} */
#media screen {
div.divFooter {
display: none;
}
div.divHeader {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
height: 250px;
bottom: 0;
left: 0;
text-align: left;
display: block;
}
div.divHeader {
position: fixed;
height: 100px;
top: 0;
left: 0;
display: block;
}
div.divBody {
height: calc(100% - 350px);
position: relative;
text-align: left;
margin-top: 20rem;
margin-bottom: -20rem;
page-break-after: always;
}
}
</style>
</head>
<body>
<table style="width: 100%;">
<thead>
<tr>
<th>
<div class="divHeader" style="display: inline-block; width: 100%;">
<table style="width: 100%; text-align: left;">
<tr>
<td><img style="width: 120px; height: 120px;"
src="https://bp.doctor2u.my/assets/img/bplogo.png">
</td>
<td style="vertical-align: top; ">
<table>
<tr style="margin-left: 1 rem;">
<td colspan="2">
<a
style="font-family:Helvetica;font-weight: bold; font-size: 20pt;">
PATHOLOGY
REPORT
</a>
</td>
</tr>
<tr>
<td colspan="2">
<span>B. P. CLINICAL LAB SDN. BHD. (152314-H)</span>
</td>
</tr>
<tr>
<td>
<span>[BranchAddress] ,</span>
</td>
<td>
<span> [BranchEmail]</span>
</td>
</tr>
<tr>
<td>
<label>Tel : </label><span>[BranchTel]</span>
</td>
<td>
<label>Fax : </label><span>[BranchFax]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>GST Reg No. : </label><span>[GST]</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 100%; text-align: left;">
<tr>
<td>
<label>Client PatientID :</label><span>[ClientId]</span>
</td>
<td colspan="2">
<label>Barcode :</label><span>[LabNo]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Patient Name :</label><span>[PatientName]</span>
</td>
<td>
<label>Age/Gender :</label><span>[Age] / [Gender]</span>
</td>
</tr>
<tr class="spaceUnder">
<td>
<label>NRIC No :</label><span>[IC]</span>
</td>
<td>
<label>Refer No :</label><span>[ReferNo]</span>
</td>
<td>
<label>Branch :</label><span>[BranchName]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Client Name :</label><span>[ClinicName]</span>
</td>
<td>
<label>Tel :</label><span>[Tel]</span>
</td>
</tr>
<tr class="spaceUnder2">
<td colspan="2">
<label>Doctor’s Name :</label><span>[DoctorName]</span>
</td>
<td>
<label>Fax:</label><span>[Fax]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Specimen :</label><span>[Specimen]</span><span>-sampled at
</span><span>[SampleDate]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Received :</label><span>[LabNo] by [ReceivedBranch]
[ReceiveDate]</span>
</td>
</tr>
</table>
<label for="" style="float: right;">Page 2 of 3</label>
<table
style="border-top: 5px solid black; width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<tr class="spaceUnder">
<th>
<label for="">TEST NAME</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<div class="divFooter" style="display: inline-block; width: 100%; left:0px;
bottom:0px; text-align: left;">
<table style="width: 100%; margin-top: 1rem;">
<tr>
<td rowspan="7" style="width: 20%;">
<!-- [Image] -->
</td>
</tr>
<tr>
<td>
Results validated and authorised through the Laboratory information
System.
</td>
</tr>
<tr>
<td>
Results checked and authorised for release
</td>
</tr>
<tr>
<td>
Test done at B.P. Clinical Lab Sdn. Bhd. (Ipoh) 273-B Jalan Raja
Permaisuri
Bainun,
30250
Ipoh, Perak.
</td>
</tr>
<tr>
<td>
Tel: 05-2559090 Fax:05-2419226
</td>
</tr>
<tr>
<td>
Ipoh lab is a MS ISO 15189 accredited lab
</td>
</tr>
<tr>
<td>
* Not SAMM Accredited
</td>
</tr>
<tr>
<td colspan="4">
<p style=" margin-top: 1rem; text-align: center;">
For further confirmation, please
repeat test with another
fresh
specimen, if desired.
Should
you
have further enquiries, please
contact your nearest BP branch or mail us at
corpcare#bphealthcare.com
<br>
[BranchAddress], [BranchEmail]
Tel: <span>[Tel]</span>,
Fax: [Fax]
</p>
</td>
</tr>
</table>
</div>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<div class="divBody">
<table style="width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<!-- LIPIDS STUDIES -->
<tr>
<td style="text-align: left;">
<label for=""><strong>Full Blood Count</strong></label>
</td>
</tr>
<tr>
<td style="text-align: left;">
<label for="">Total RBC</label>
</td>
<td>
<label for="">[TotalRBCResult]</label>
</td>
<td>
<label for="">[TotalRBCUnit]</label>
</td>
<td>
<label for="">[TotalRBCRange]</label>
</td>
<td>
<label for="">[TotalRBCResult2]</label>
</td>
<td>
<label for="">[TotalRBCUnit2]</label>
</td>
<td>
<label for="">[TotalRBCRange2]</label>
</td>
</tr>
<!-- More row -->
<br>
<br>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I would like to bring this vertical scroll bar to the front. Here is the image.
I do not know how to set it.
UPDATE
I did a work around but the wrong part is that the items text element are not hidding behind the header. Here is my fiddle
.container
{
position: absolute;
background: lightblue;
height: 100%;
width: 90%;
}
.table-header
{
position: absolute;
height: 25px;
width: 100%;
background: red;
}
.table-body
{
position: relative;
padding-top: 25px;
overflow: auto;
height: 30%;
}
.table
{
table-layout: fixed;
}
<div class="container">
<div class="table-header">
<table class="table">
<thead>
<th>
Header
</th>
</thead>
</table>
</div>
<div class="table-body">
<table class="table">
<tbody>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
Item 3
</td>
</tr>
<tr>
<td>
Item 4
</td>
</tr>
<tr>
<td>
Item 5
</td>
</tr>
<tr>
<td>
Item 6
</td>
</tr>
<tr>
<td>
Item 7
</td>
</tr>
</tbody>
</table>
</div>
</div>
As the scrollbar is on your table, there's no way you can have the scrollbar on top of the table header, and your table below the table header. Your best bet is to have it offset from top the height of the header:
So change your current CSS for your table body:
.table-body
{
position: relative;
overflow: auto;
height: 30%;
margin-top: 25px;
}
See this fiddle.
Update
Instead of adding padding-top:25px you need to add margin-top:25 to .table-body
This should work. Adding z-index to .table-header will fix the issue.
.container
{
position: absolute;
background: lightblue;
height: 100%;
width: 90%;
}
.table-header
{
position: absolute;
height: 25px;
width: 100%;
z-index:1000;
background: red;
}
.table-body
{
position: relative;
margin-top: 25px;
overflow: auto;
height: 30%;
}
.table
{
table-layout: fixed;
}
<div class="container">
<div class="table-header">
<table class="table">
<thead>
<th>
Header
</th>
</thead>
</table>
</div>
<div class="table-body">
<table class="table">
<tbody>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
Item 3
</td>
</tr>
<tr>
<td>
Item 4
</td>
</tr>
<tr>
<td>
Item 5
</td>
</tr>
<tr>
<td>
Item 6
</td>
</tr>
<tr>
<td>
Item 7
</td>
</tr>
</tbody>
</table>
</div>
</div>
You can bring header on front by using z-index and after that just adjust the width of header to scroll-bar.
.container
{
position: absolute;
background: lightblue;
height: 100%;
width: 90%;
}
.table-header
{
position: absolute;
height: 25px;
width: 96.8%;
background: red;
z-index:1;
}
.table-body
{
position: relative;
padding-top: 25px;
overflow: auto;
height: 30%;
}
.table
{
table-layout: fixed;
}
<div class="container">
<div class="table-header">
<table class="table">
<thead>
<th>
Header
</th>
</thead>
</table>
</div>
<div class="table-body">
<table class="table">
<tbody>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
Item 3
</td>
</tr>
<tr>
<td>
Item 4
</td>
</tr>
<tr>
<td>
Item 5
</td>
</tr>
<tr>
<td>
Item 6
</td>
</tr>
<tr>
<td>
Item 7
</td>
</tr>
</tbody>
</table>
</div>
</div>
I am having trouble reducing the height of the table cells in rows 1 and 2. I tried setting the table rows to 100 pixels within html, but when I do that table cells below the row grow larger as if compensating for the missing space. I do not see this happening in the fiddle below, but I am having this problem in Chrome. I would appreciate any help. The relevant code is below, and the full page is in the fiddle.
https://jsfiddle.net/9qLg7c31/2/
HTML:
Resume Page
<br>
<table class="no-spacing">
<tr style="height:100px">
<td>
Northwestern University
</td>
<td>
Class of 2016
</td>
<td>
Bachelors of Science in Journalism
</td>
<td style="text-indent: 10px">
Integrated Marketing Certificate
</td>
</tr>
<tr>
<td>
Field
</td>
<td>
2012
</td>
<td>
2013
</td>
<td>
2014
</td>
<td>
2015
</td>
<td>
2016
</td>
</tr>
<tr>
<td>Content Marketing</td>
<td style="background-color:white">
<div class="dropdown";>
<img src="http://st.hzcdn.com/fimgs/5f33bbc80182569c_3779-w173-h173-b1-p0--whatasteele.jpg">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color: white">
</td>
<td>
</td>
<td style="background-color: white">
<div class="dropdown">
<img src="http://www.reelnreel.com/wp-content/uploads/2015/01/Wochit.png">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color:white">
</td>
</tr>
<tr>
<td>
Multimedia Journalism
</td>
<td>
</td>
<td>
</td>
<td style="background-color: blue">
<div class="dropdown">
<img src="http://www.complaintsboard.com/thumb.php?src=chicago-tribune.jpg&wmax=900&hmax=900&quality=90&nocrop=1&bname=120767">
<div class="dropdown-content">
</div>
</div>
</td>
<td style="background-color: black">
<div class="dropdown">
<div class="dropdown-content">
<img src="http://onekreate.com/wp-content/uploads/2014/04/40_Inc_Magazine.jpg">
</div>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>Volunteer Work</td>
<td style="background-color: purple">
<div class="dropdown">
<div class="dropdown-content">
<img src="https://pbs.twimg.com/profile_images/570772503543291904/uYixut-M.jpeg" style="width:100px; height:100px">
</div>
</td>
<td style="background-color: purple">
</td>
<td style="background-color: purple">
</td>
<td>
</td>
<td>
</tr>
</table>
CSS:
#resume {
width: 100%;
height: 150%;
background-color: rgb(0,300,200);
margin-bottom:0px;
z-index:0;
}
#resume table{
background-color: rgb(0,200,200);
margin-left: 2.5%;
width:95%;
height:100%;
padding-bottom:10px;
border-radius: 20px;
}
#resume table ul{
color: rgb(0,300,200);
font-size:20px;
}
.no-spacing {
border-spacing:0; /* Removes the cell spacing via CSS */
border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content{
display: hidden;
}
.dropdown:hover .dropdown-content{
display:block;
position: relative;
width:300px;
}
#resume table th{
padding:15px 0 15px 0;
}
#resume table img{
width:150px;
height:100px;
}
#resume table tr:nth-child(3), #resume table tr:nth-child(4), #resume table tr:nth-child(5){
height:200px;
}
I am a beginner and I have a doubt. I created this HTML table and I need to place the footer at the bottom of the page without using footer tag. Is there any way to place the footer at the bottom by using table? It will be helpful
<table>
<tr>
<h2><img src="lock.jpg" width="80" height="30"/>Welcome to Locker</h2>
</tr>
<tr>
<td>
<form>
<table align="center">
<tr>
<td align="right">
<h4><p> Lock name:</p></h4>
</td>
<td align="left">
<h4>
<input type="text" maxlength="8" name="lock" onkeyup="return AllowLock()"/>
</h4>
</td>
<td>
<h6 id="errfn"> </h6>
</td>
</tr>
<tr>
<td align="right">
<h4><p> Key:</p></h4>
</td>
<td align="left">
<h4>
<input type="text" maxlength="8" name="keys" onkeyup="return AllowKey()"/>
</h4>
</td>
<td>
<h6 id="error"></h6>
</td>
</tr>
<tr>
<td align="right"></td>
<td align="left">
<input id="gobutton" type="submit" value="Go!"/>
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td>
<p id="about">About</p>
<p id="contact">Contact us</p>
<p id="career">Careers</p>
<p id="press">Press</p>
</td>
</tr>
</table>
have a look here http://jsfiddle.net/25LKc/
use a <div><!-- footer content here --></div> as a wrapper
with position fixed;
<!-- your html here -->
</td>
</table>
<div class="footer"></div>
<style type="text/css">
.footer {
background-color:orange;
width:100%;
height:400px;
position:fixed;
bottom:0px;
}
</style>
You can use some CSS and a bit of HTML to place it, in your table tab have:
and then above it have some code for css like:
<script>
.table {
position:fixed;
bottom:0px;
}
</script>
This will place the table at the bottom
Answering your question, for your table layout to have 100% height you need to set some CSS properties:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#my_table {
height: 100%;
}
And in the HTML:
<table id="my_table">...</table>
You can place any element to the bottom by just adding this css to any of your classes or id's.
//CSS
{
position:fixed; /*Set this to absolute if you do not want it to be on bottom always*/
width:100%;
bottom:0px;
left:0px;
height:80px;
}
//Practical Usage
<html>
<head>
<style type="text/css">
.footer {
position: fixed;
width: 100%;
bottom: 0px;
left: 0px;
background: rgb(216, 216, 216);
height: 80px;
text-align: center;
}
.content {
position: relative;
width: 100%;
background: rgb(16, 16, 85);
height: 600px;
margin-bottom: 100px;
color: white;
}
</style>
</head>
<body>
<!--Page Content-->
<div class="content">
<table align="center">
<tr>
<td>Sample1</td>
<td>Sample2</td>
</tr>
<tr>
<td>Sample1</td>
<td>Sample2</td>
</tr>
</table>
</div>
<!--Footer Table-->
<table class="footer">
<td>Footer Goes Here</td>
</table>
</body>
</html>
JSFiddle Example I've Created : http://jsfiddle.net/mm6qc/
I have a <div> with a number of <tables> in it, how do I get these <tables> on one line?
<html>
<head>
<title>no-line-break</title>
<style type="text/css">
#foo
{
width: 500px;
border: 1px solid #000;
overflow-x: auto;
}
.bar
{
float: left;
width: 150px;
margin: 5px;
}
.bar th
{
background-color: #c0c0c0;
}
</style>
</head>
<body>
<div id="foo">
<table class="bar">
<tr>
<th>
Foo #1
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #2
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
<tr>
<td>
Bar #2
</td>
</tr>
<tr>
<td>
Bar #3
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #3
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #4
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<div style="clear: both;"> </div>
</div>
</body>
</html>
You will need to add another div inside #foo that is at least as wide as the sum of all tables with their margins and paddings so that they won´t wrap.
example:
<html>
<head>
<title>no-line-break</title>
<style type="text/css">
#foo
{
width: 500px;
border: 1px solid #000;
overflow-x: auto;
}
#foo_inner
{
width: 650px;
}
.bar
{
float: left;
width: 150px;
margin: 5px;
}
.bar th
{
background-color: #c0c0c0;
}
</style>
</head>
<body>
<div id="foo">
<div id="foo_inner">
<table class="bar">
<tr>
<th>
Foo #1
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #2
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
<tr>
<td>
Bar #2
</td>
</tr>
<tr>
<td>
Bar #3
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #3
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<table class="bar">
<tr>
<th>
Foo #4
</th>
</tr>
<tr>
<td>
Bar #1
</td>
</tr>
</table>
<div style="clear: both;"> </div>
</div>
</div>
</body>
</html>
Perhaps a traditional table layout may be what you're going for.
http://jsfiddle.net/T8pfZ/2
Make all of them display:inline. So, do this:
.bar
{
float: left;
width: 150px;
margin: 5px;
display: inline;
}
#foo
{
width: 500px;
border: 1px solid #000;
overflow-x: auto;
display: inline;
}
Try adding "display:inline;" to your Foo CSS block. You may have to adjust your width.
If I understand you, you cant all the tables in the same line, so you need to put the display:inline in the #foo style.
#foo {
display:inline
}