how to prevent the tbody from overlapping with tfoot - html

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>

Related

css rotate text vertically across table columns

I have a matrix which, because of the subjects names, is stretching off screen
I wish to create a training matrix with the abilities on the left, colored cells for the acquired skill, with the subjects name vertically across the columns.
I have tries using bootstrap and css rules to rotate text, but I cant get the text to float above the grid
apologies, this is what I have tried :
<style>
.rotate {
transform: rotate(90deg);
width: 8rem;
}
</style>
</head>
<body>
<div class="row">
<div class="col">
<table class="table">
<tr> <td> </td>
<tr> <td> <p class="text-nowrap bd-highlight rotate ">Bruce Wayne. </p> </td>
<tr> <td> <p class="text-nowrap bd-highlight rotate ">Clark Kent.</p> </td>
<tr> <td> <p class="text-nowrap bd-highlight rotate ">Barry Allen.</p> </td>
</tr>
<tr> <td> Detective</td> <td class="table-success"> </td> <td class="table-success"></td> <td class="table-success"></td> </tr>
<tr> <td> can fly</td> <td class="table-success"> </td> <td class="table-success"></td> <td class="table-success"></td> </tr>
<tr> <td> runs fast</td> <td class="table-success"> </td> <td class="table-success"></td> <td class="table-success"></td> </tr>
<tr> <td> plays well</td> <td class="table-success"> </td> <td class="table-success"></td> </tr>
</table>
all the vertical text stacks to the left of the screen.

Is this what you wanted?
.table {
background: grey;
border-spacing: 5px;
border: none;
width: 500px;
}
.rotate {
transform: rotate(90deg);
width: 8rem;
}
td {
width: 25%;
border: 2px solid black;
padding: 10px;
position: relative;
}
.vertical {
transform: rotate(90deg);
position: absolute;
top: 200%;
left: 0;
right: 0;
color: #fff;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
white-space: nowrap;
}
.
<body>
<div class="row">
<div class="col">
<table class="table">
<tr>
<td> Detective</td>
<td class="table-success"><span class="vertical"> Bruce Wayne</span> </td>
<td class="table-success"><span class="vertical"> clark Kent</span></td>
<td class="table-success"><span class="vertical"> barry allen</span></td>
</tr>
<tr>
<td> can fly</td>
<td class="table-success"> </td>
<td class="table-success"></td>
<td class="table-success"></td>
</tr>
<tr>
<td> runs fast</td>
<td class="table-success"> </td>
<td class="table-success"></td>
<td class="table-success"></td>
</tr>
<tr>
<td> plays well</td>
<td class="table-success"> </td>
<td class="table-success"></td>
<td class="table-success"></td>
</tr>
</table>

You haven't given your code how you did it but I give you a solution. Hope this is useful for you.
.rotate{
transform: rotate(-90deg);
}
<table>
<tr>
<td class="rotate">BRUCE</td>
<td class="rotate">CLARK</td>
<td class="rotate">BARRY</td>
</tr>
</table>

Adding multiple columns to a table in one row only

I need to make a table with multiple rows for a form.
I'm stuck with this part:
,
This is what I want:
Any help on shortening those cells would be much appreciated.

Try this one: https://jsbin.com/kekecixuda/1/edit?html,css,output
// Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="main-box">
<table border=1>
<tr>
<td class="bold-text">Course Information</td>
</tr>
<tr>
<td>Course Name:</td>
<td>
<select class="select-aria">
<option value="">Select a cource</option>
<option value="">...</option>
<option value="">...</option>
</select>
</td>
</tr>
<tr>
<td>Select a section:</td>
<td class="td-pos">
<input type="radio" name="browser" value="a1" class="inputs-pos">1
</td>
<td class="td-pos">
<input type="radio" name="browser" value="a2" class="inputs-pos">2
</td>
<td class="td-pos">
<input type="radio" name="browser" value="a3" class="inputs-pos">3
</td>
</tr>
</table>
</div>
</body>
</html>
// CSS
* {
margin: 0;
padding: 0;
font-size: 15px;
}
.main-box {
background-color: #40b3bf;
width: 680px;
padding: 20px;
}
.bold-text {
font-weight: bold;
width: 250px;
}
.select-aria {
width: 130px;
}
table {
border-collapse: separate;
}
td {
padding: 2px;
min-width: 140px;
}
.inputs-pos {
margin: 0px 5px 0px 3px;
}
.td-pos {
padding-top: 5px;
}

You need to use colspan. Where you want one column to look like 3, set the colspan=3 so on.
<table border="1">
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

My sketch showing some elements, very simple, just for fun:
table{border-collapse:collapse}
td{border:1px solid #000;padding:5px}
<table>
<tr>
<td colspan="4">Course Information</td>
</tr>
<tr>
<td>Course Name:</td>
<td colspan="3"><input type="search"></td>
</tr>
<tr>
<td>Select a section:</td>
<td><input type="radio"> 1</td>
<td><input type="radio"> 2</td>
<td><input type="radio"> 3</td>
</tr>
</table>

How I can draw lines in a web page?

I intend to add some lines into an HTML table that marks grouping rows. See below picture.
Is it possible to draw those blue lines in the table? Thanks.
http://jsbin.com/kogijixici/1/edit?html,output
<table><tr></tr></table>

Use the following css, and you will get your result:
td[rowspan] {
position: relative;
}
td[rowspan]:before {
content: '';
height: 80%;
width: 20%;
border: 2px solid blue;
border-right: none;
position: absolute;
top: 10%;
right: 10px;
}
Here is the link to jsbin: http://jsbin.com/juzasemeje/edit?html,css,output
You can customise the values a little to match your requirements.

Try this
.td-line {
position: relative;
}
.td-line:before {
content: '';
display: block;
width: 20px;
height: 73%;
position: absolute;
right: 10px;
top: 13%;
border-top: solid 1px blue;
border-bottom: solid 1px blue;
border-left: solid 1px blue;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<th width="150" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
</tr>
<tr>
<td rowspan="3" class="td-line"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="4" class="td-line"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</html>

is this output ru expecting
check output in Jsbin.com
.border{
border-top:2px solid blue;
border-left:2px solid blue;
border-bottom:2px solid blue;
height:50px;
width:20px;
position:relative;
left:100px;
bottom:10px
}
update ur css as above

Style Generated Table Rows

I'm trying to achieve this look for a table. I couldn't figure out how to space it like this. This is my code so far. How can i accomplish this?
<table class="table table-inverse" data-bind="foreach: todos">
<tr >
<td ><input type="checkbox" data-bind="checked: IsDone, click: $parent.updateTodo" /></td>
<td ><span data-bind="text: Description"></span></td>
<td ><small></small></td>
</tr>
</table>

Well you can check the following snippet, if you are looking for backward compatibility the following could be useful
.wrapper{padding:20px;background:blue;}
table tr td:last-child,table tr td:first-child{width:25px;}
table{width:100%;background:#fff;margin-bottom:5px}
table:last-child{margin-bottom:0;}
<div class="wrapper">
<table class="table table-inverse" data-bind="foreach: todos">
<tr>
<td>[#]</td>
<td><span data-bind="text: Description">Hello</span></td>
<td>[#]</td>
</tr>
</table>
<table class="table table-inverse" data-bind="foreach: todos">
<tr>
<td>[#]</td>
<td><span data-bind="text: Description">Hello</span></td>
<td>[#]</td>
</tr>
</table>
</div>

You can use flex-box to achieve this
body{
background:#3a9bcb;
}
table{
width:100%;
}
.flex-box {
display: flex;
margin-bottom: 5px;
padding: 10px;
background:#fff;
}
.col {
flex: 1 1;
}
.col:first-child,
.col:last-child {
flex: 0 0 30px;
}
<table>
<tr class=flex-box>
<td class=col>
<input type=checkbox>
</td>
<td class=col>
Placeholder text
</td>
<td class=col>
Trash
</td>
</tr>
<tr class=flex-box>
<td class=col>
<input type=checkbox>
</td>
<td class=col>
Placeholder text
</td>
<td class=col>
Trash
</td>
</tr>
</table>

Aligning a table to the second column of another table

I want to align the second <table> in the <div>. The table should start from the second column of the first table. Right now, the second table with the text “1111111111111” starts from the extreme left but I wish to align it to where the textboxes start in the first table.
Here is my HTML:
<div style="float: left; height: 250px;overflow:auto; display:block;margin-left: 10px">
<table border="1">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111</td>
</tr>
</table>
</div>

Set the margin-left value to 33% for the 2nd table using :nth-child(2)
table:nth-child(2) {
margin-left: 33%;
}
<div style="float: left; height: 250px;overflow:auto; display:block;margin-left: 10px">
<table border="1">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111</td>
</tr>
</table>
</div>

div {
display: table; /* Display the div as a table */
}
div > table {
display: contents; /* Ignore the tables and display their contents
as if they were contents of the div */
}
div > table:last-child tr:before {
content: ''; /* Insert a pseudo-element at the beginning */
display: table-cell; /* Display it as a cell */
}
div {
display: table;
}
div > table {
display: contents;
}
div > table:last-child tr:before {
content: '';
display: table-cell;
}
<div>
<table border="1">
<caption>Title</caption>
<tr>
<td>First Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" /></td>
</tr>
</table>
<table border="1">
<tr>
<td>1111111111111</td>
</tr>
</table>
</div>
Note display: contents is not widely supported yet.

You can have a look at this code. Let me know if its working with you.
http://jsfiddle.net/FnK9D/13/
<div style="position:absolute;">
<table border="1" style="">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1" style="float:right;">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111111</td>
</tr>
</table>
</div>