Fiddle: http://jsfiddle.net/fr8Kw/
Html:
<!DOCTYPE html>
<html>
<head>
<title>Table Pagination</title>
<style>
body {
font-family: Tahoma;
}
h3 {
background-color: rgb(232, 232, 232);
font-size: 14px;
font-weight: bold;
color: gray;
width: 786px;
height:25px;
margin:2em auto;
padding-top:10px;
padding-left:8px;
margin-bottom: -23px;
border: 1px solid;
border-color: #888888;
}
table {
table-layout: fixed;
font-size: 12px;
width: 810px;
margin: 2em auto ;
}
thead {
background:rgb(232, 232, 232);
color: gray;
height:20px;
}
td {
width: 10em;
height:20px;
word-wrap: break-word;
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(1 /*this is the column number*/){
text-align: center;
width:30px
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(2 /*this is the column number*/) {
width:250px
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(3 /*this is the column number*/) {
width:250px
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(4 /*this is the column number*/){
width:60px
}
#localFileCopyingDiv #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(5 /*this is the column number*/) {
width:220px
}
tbody {
background:#D8D8D8
}
div.pager {
width: 799px;
text-align: left;
margin: 0 auto;
margin-top: -20px;
}
div.pager span {
display: inline-block;
width: 10px;
height: 10px;
cursor: pointer;
background:rgb(156, 187, 203);
color: #fff;
margin-right: 0.5em;
font-size: 13px;
padding-top: 8px;
padding-left:8px;
padding-bottom: 8px;
padding-right:8px;
}
div.pager span.active {
background: rgb(123, 167, 198);
}
.highlightedRow {
color : red;
}
#fileWritingDiv table tbody {
color : red;
}
</style>
<script type="text/javascript" src="resources/javascripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="localFileCopyingDiv">
<h3>Local File Copying Info:</h3>
<table class="paginated">
<thead>
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
</tbody>
</table>
</div>
<div id="supplementaryMaterialsDiv">
<h3>Supplementary Materials:</h3>
<table class="paginated">
<thead>
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
</tbody>
</table>
</div>
<div id="assetsDiv">
<h3>Assets:</h3>
<table class="paginated">
<thead>
<tr>
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
</tbody>
</table>
</div>
<div id="fileWritingDiv">
<h3>File Writing Status</h3>
<table>
<thead>
<tr>
<td>File Name</td>
<td>Error Cause</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript"
src="resources/javascripts/tablePagination.js" /></script>
</body>
</html>
Problem: the following CSS rule is not being applied to any column. Why not?
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(1 /*this is the column number*/)
{
text-align: center;
width:30px
}
notice in your Assets table you have a TR within a TR..
<table class="paginated">
<thead>
<tr> <----
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</tr> <----
</thead>
<tbody>
remove the stray TR and the 1st col becomes 30px wide.
try like this
.paginated tbody tr td:nth-child(2) {
text-align: center;
width:30px;
}
Related
I am trying to create a circle css and add some more changes to it,
Here is my code for circles
.container {
display: flex;
flex-wrap: nowrap;
width: 200px;
height: 50px;
}
.holder {
margin-right: 5px;
width: 30px;
height: 30px;
border-radius: 50%;
}
.h1 {
background: blue;
}
.h2 {
background: red;
}
.h3 {
background: green;
}
.h4 {
background: grey;
}
and the html code
<div class="container">
<div class="holder h1"></div>
<div class="holder h2"></div>
<div class="holder h3"></div>
<div class="holder h4"></div>
</div>
works well for the circles, but my end goal is to do this
https://prnt.sc/KCA2zWq435oK
how can i do this, any help will be much appreciated
regards
I created this table
.container {
display: flex;
flex-wrap: nowrap;
width: 200px;
height: 50px;
}
.holder {
margin-right: 5px;
width: 30px;
height: 30px;
border-radius: 50%;
}
.h1 {
background: blue;
}
.h2 {
background: red;
}
.h3 {
background: green;
}
.h4 {
background: grey;
}
th {
writing-mode: vertical-rl;
min-width: 30px;
transform: rotate(180deg);
text-transform: capitalize;
}
td {
min-width: 30px;
height: 30px;
}
<table>
<tr>
<th>
drafted
</th>
<th>
submitted
</th>
<th>
approved
</th>
<th>
processed
</th>
</tr>
<tr>
<td>
<div class="holder h1">
<div/>
</td>
<td>
<div class="holder h2">
<div/>
</td>
<td>
<div class="holder h3">
<div/>
</td>
<td>
<div class="holder h4">
<div/>
</td>
<td>
<div class="holder h3">
<div/>
</td>
<td>
Not drafted - missing
</td>
</tr>
</table>
I hope it helps you
You can easily customize it for yourself
Semantically this is a table.
This snippet creates the circles as radial-gradient backgrounds to the relevant cells.
The headings are written vertically and rotated to give the desired orientation.
thead>tr>th {
writing-mode: vertical-lr;
transform: rotate(180deg);
text-align: left;
}
tbody>tr>td {
width: 50px;
height: 50px;
--bg: gray;
background-image: radial-gradient(circle, var(--bg) 0 70%, transparent 70% 100%);
background-size: 70% 70%;
background-repeat: no-repeat;
background-position: center center;
}
tbody>tr>td:last-child {
width: 400px;
--bg: transparent;
}
.gold {
--bg: gold;
}
.green {
--bg: green;
}
.red {
--bg: red;
}
<table>
<thead>
<tr>
<th>Drafted</th>
<th>Submitted</th>
<th>Approved</th>
<th>Processed</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Not drafted - missing</td>
</tr>
<tr>
<td class="gold"></td>
<td></td>
<td></td>
<td></td>
<td>Drafted but not submitted</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td></td>
<td></td>
<td>Submitted - not approved</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td></td>
<td>Approved not processed</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td>Processed</td>
</tr>
<tr>
<td class="gold"></td>
<td></td>
<td class="red"></td>
<td></td>
<td>Rejected, back in draft</td>
</tr>
<tr>
<td class="green"></td>
<td class="green"></td>
<td></td>
<td></td>
<td>Rejected initially, submitted again</td>
</tr>
</tbody>
</table>
I need a table styling like below, where the milestone label is displayed without any spacing with the table content itself wile on the right of it I have a couple of additional information displayed in cells with spacing between them and below content.
divs can work as well.
You can create the cells at the top right as seperate tables with position: absolute and make the cell under those (the top right of the large table, spanning several columns) invisible as shown below.
table {
border-collapse: collapse;
border: none;
}
th,
td {
border: 1px solid blue;
padding: 15px 20px;
}
th {
background: #ccc;
border: 1px solid red;
}
.head1 {
background: #aaa;
border-color: green;
}
.nohead {
display: none;
}
table.t1 {
margin-top: 20px;
}
table.t2 {
position: absolute;
right: 180px;
top: 10px;
}
.t2 td {
padding: 2px 15px;
width: 50px;
text-align: center;
border-color: orange;
}
<table class="t1">
<tr>
<td colspan="3" class="head1">The main header</td>
<td colspan="4" class="nohead">nothing to see</td>
</tr>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
<th>Cell 3</th>
<th>Cell 4</th>
<th>Cell 5</th>
<th>Cell 6</th>
<th>Cell 7</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
</tr>
</table>
<table class="t2">
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
how I can achieve this same result with on hover, dotted border for each item in the list. Try it yourself by hovering the packages.
https://www.bitrix24.com/prices/
Very simple,
Try
tr:hover{
outline: thin dashed;
}
Working Example:
Link https://codepen.io/vikas_saini/pen/poogeWx
you can use this particular div. if you need these attraction
very easiest css :
tr:hover {
position: absolute;
border: 2px dotted #68ddff;
transition: all 0.2s ease-in-out;
}
i think good working for you.
Thanks
You can try this.
#mytable tr.row:hover td
{
border: 1px solid red;
}
#mytable tr.row:hover td
{
border: 1px solid red;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr{
transition: outline 1s;
outline: thin solid;
outline-color: transparent;
}
<!DOCTYPE html>
<html>
<body>
<h2>HTML Table</h2>
<table id="mytable">
<tr class="row">
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class="row">
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="row">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="row">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr class="row">
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="row">
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="row">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
I have seen a few similar questions but they don't match what I am after. I have a situation where a table can have inner tables. However, I like the inner table to ignore the styles defined by "myTable". How can I do this?
Preferably, without adding a CSS for inner table. Or at least without adding a new class or reference to an ID for the inner table. Thank you for any help.
#myTable td, #myTable th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
Deryck has the right answer altough it's not complete because of browser implementation and missing tr
#myTable > tbody > tr > td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > tbody > tr > th {
border: 1px solid #ddd;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
If you are trying to make it so the styles you have there don't apply to anything but the specific children (tr, th, etc at the top level) you can use > to specify the style to only apply to the direct children of #myTable
#myTable > td, #myTable > th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
I'm trying to add some custom formatting to an e-commerce receipt for printing, with a fixed header and footer to appear on every page printed. The problem is, it seems to intermittently work. Sometimes it loads fine, others, the header appears near the middle of the page rather than at the top. Sometimes just canceling the print dialog box and reopening it has changed how it loads.
Examples:
Correct:
Incorrect:
Incorrect:
Is this some kind of chrome rendering issue?
Full code below:
body{
background: #FFFFFF;
font-size: 12pt;
}
.bold {
font-weight:bold;
}
.clr {
clear: both;
}
.invoice-title {
font-size: 14pt;
color:#734B3A;
margin:25px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
table {
width: 100%;
}
th {
text-align: left;
border-bottom:1px solid #EEE;
}
.variation {
font-size: 11px;
}
#main_container {
width:100%;
margin:0 0 30px 0;
}
#main {
width:720px;
margin:auto;
}
#main .header_logo {
text-align: right;
margin:15px 0 15px 0;
font-size: 24px;
font-weight: bold;
color:#000000;
font-family: Arial, Helvetica, sans-serif;
}
#main .wrapper {
border:1px solid #EFECDC;
background-color:#FFFFFF;
}
#main .wrapper-table {
margin:0 0 0 0;
padding:25px 25px 25px 25px;
font-family:Arial, Helvetica, sans-serif;
}
.short_cell {
width: 90px;
}
#media all {
.page-break { display:none; }
}
#media print {
.page-break { display:block; page-break-before:always; }
.noprint { display: none; }
}
body{
margin-top: 145px;
}
#main .header_logo{
font-family: 'Sacramento', cursive;
color: #D79E32;
font-size: 3.5em;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0px;
padding-top: 90px;
line-height: 0.6em;
padding-bottom: 10px;
border-bottom: #ade6df solid 10px;
position: fixed;
top: 0;
width: 715px;
background-color: #fff
}
#main .header_logo img{
max-height: 120px;
max-width: 120px;
float: left;
margin-top: -85px;
}
#main .wrapper{
border:none;
}
.footer {
background: #ade6df;
color: #fff;
text-align: center;
font-family: 'Open Sans', sans-serif;
padding: 5px 0;
font-weight: 300;
position: fixed;
bottom: 0;
width: 715px;
}
.footer a{
color: #fff;
text-decoration: none;
}
.footer .spacer {
font-size: 0.5em;
padding: 0 10px;
vertical-align: middle;
position: relative;
top: -2px;
}
.page-break{
height: 215px;
width: 100%;
}
.page-break:last-child{
display: none;
}
#media screen {
.footer {
bottom: 20px;
}
body{
margin-bottom: 30px;
}
}
<div style="main_container">
<div id="main">
<div class="header_logo">
<img src="/receipt_logo.jpg" alt="" />
My Company
</div>
<div class="clr"></div>
<div class="wrapper">
<div class="wrapper-table">
<table cellpadding="0" cellspacing="5" border="0" style="margin-left:5px;">
<tr>
<td class="invoice-title">Receipt</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><strong>Date:</strong> 9/13/2016</td>
</tr>
<tr>
<td><strong>Order Number:</strong> 123456789</td>
</tr>
<tr><td><strong>Email:</strong> email#email.com</td></tr><tr><td><strong>Phone:</strong> 585-123-4567</td></tr><tr><td><strong>newsletter subscribe:</strong> 0</td></tr> <tr>
<td>
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td valign="top" style="padding-right: 20px;"><strong>Invoice Address:</strong><br />
Jane J. Doe<br />123 Main Street<br />ANYTOWN, CA 12345<br />US<br /> </td>
<td valign="top"><strong>Shipping Address (Me):</strong><br />Jane J. Doe<br />123 Main Street<br />ANYTOWN, CA 12345<br />US<br />Method: Standard Shipping<br />Shipping: $6.99<br /> </td> </tr></table>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="5" border="0" style="margin-top:30px;">
<tr>
<th>Product</td>
<th class="short_cell">Price</td>
<th class="short_cell">Qty</td>
<th class="short_cell">Subtotal</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr class="page-break"></tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr style="margin-top:30px;">
<td> </td>
<td colspan="2" align="right">Shipping:</td>
<td class="short_cell bold">$6.99</td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="right">LAWN:</td>
<td class="short_cell bold">-$8.70</td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="right">Total:</td>
<td class="short_cell bold">$56.27</td>
</tr>
</table>
</div>
</div>
<div class="footer">
My company<span class="spacer">●</span>mycompany.com<span class="spacer">●</span>888-111-1234<span class="spacer">●</span>info#mycompany.com
</div>
</div>
</div>
<div class="page-break"></div>
There is .footer { position: fixed; } directive. I made it a HTML file with your CSS. I checked with Safari print, now that info is coming. But you need adjustment of padding, margin etc. Also footer div class is does not sound good near navigation. Also add that color on print CSS part, else it will be on white background. Here is the raw gist with what probably you wanted -- https://gist.githubusercontent.com/AbhishekGhosh/ddb08179d238ec36f48ee467e4916d42/raw/16e761809f357ba0d2ac085bc6746487451db3d4/stack0410.html . Save it as HTML file and open on your browser.
Note : Edited.
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
<style>body{
background: #FFFFFF;
font-size: 12pt;
}
.bold {
font-weight:bold;
}
.clr {
clear: both;
}
.invoice-title {
font-size: 14pt;
color:#734B3A;
margin:25px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
table {
width: 100%;
}
th {
text-align: left;
border-bottom:1px solid #EEE;
}
.variation {
font-size: 11px;
}
#main_container {
width:100%;
margin:0 0 30px 0;
}
#main {
width:720px;
margin:auto;
}
#main .header_logo {
text-align: right;
margin:15px 0 15px 0;
font-size: 24px;
font-weight: bold;
color:#000000;
font-family: Arial, Helvetica, sans-serif;
}
#main .wrapper {
border:1px solid #EFECDC;
background-color:#FFFFFF;
}
#main .wrapper-table {
margin:0 0 0 0;
padding:25px 25px 25px 25px;
font-family:Arial, Helvetica, sans-serif;
}
.short_cell {
width: 90px;
}
#media all {
.page-break { display:none; }
}
#media print {
.page-break { display:block; page-break-before:always; }
.noprint { display: none; }
}
body{
margin-top: 145px;
}
#main .header_logo{
font-family: 'Sacramento', cursive;
color: #D79E32;
font-size: 3.5em;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0px;
padding-top: 90px;
line-height: 0.6em;
padding-bottom: 10px;
border-bottom: #ade6df solid 10px;
position: fixed;
top: 0;
width: 715px;
background-color: #fff
}
#main .header_logo img{
max-height: 120px;
max-width: 120px;
float: left;
margin-top: -85px;
}
#main .wrapper{
border:none;
}
.footer {
background: #ade6df;
color: #fff;
text-align: center;
font-family: 'Open Sans', sans-serif;
padding: 5px 0;
font-weight: 300;
#position: fixed;
bottom: 0;
width: 715px;
}
.footer a{
color: #fff;
text-decoration: none;
}
.footer .spacer {
font-size: 0.5em;
padding: 0 10px;
vertical-align: middle;
position: relative;
top: -2px;
}
.page-break{
height: 215px;
width: 100%;
}
.page-break:last-child{
display: none;
}
#media screen {
.footer {
bottom: 20px;
}
body{
margin-bottom: 30px;
}
}</style>
</head>
<body>
<div style="main_container">
<div id="main">
<div class="header_logo">
<img src="/receipt_logo.jpg" alt="" />
My Company
</div>
<div class="clr"></div>
<div class="wrapper">
<div class="wrapper-table">
<table cellpadding="0" cellspacing="5" border="0" style="margin-left:5px;">
<tr>
<td class="invoice-title">Receipt</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><strong>Date:</strong> 9/13/2016</td>
</tr>
<tr>
<td><strong>Order Number:</strong> 123456789</td>
</tr>
<tr><td><strong>Email:</strong> email#email.com</td></tr><tr><td><strong>Phone:</strong> 585-123-4567</td></tr><tr><td><strong>newsletter subscribe:</strong> 0</td></tr> <tr>
<td>
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td valign="top" style="padding-right: 20px;"><strong>Invoice Address:</strong><br />
Jane J. Doe<br />123 Main Street<br />ANYTOWN, CA 12345<br />US<br /> </td>
<td valign="top"><strong>Shipping Address (Me):</strong><br />Jane J. Doe<br />123 Main Street<br />ANYTOWN, CA 12345<br />US<br />Method: Standard Shipping<br />Shipping: $6.99<br /> </td> </tr></table>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="5" border="0" style="margin-top:30px;">
<tr>
<th>Product</td>
<th class="short_cell">Price</td>
<th class="short_cell">Qty</td>
<th class="short_cell">Subtotal</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr class="page-break"></tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$24.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$24.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$7.99</td>
<td class="short_cell">1</td>
<td class="short_cell">$7.99</td>
</tr>
<tr>
<td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
<td class="short_cell">$25.00</td>
<td class="short_cell">1</td>
<td class="short_cell">$25.00</td>
</tr>
<tr style="margin-top:30px;">
<td> </td>
<td colspan="2" align="right">Shipping:</td>
<td class="short_cell bold">$6.99</td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="right">LAWN:</td>
<td class="short_cell bold">-$8.70</td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="right">Total:</td>
<td class="short_cell bold">$56.27</td>
</tr>
</table>
</div>
</div>
<div class="footer">
My company<span class="spacer">●</span>mycompany.com<span class="spacer">●</span>888-111-1234<span class="spacer">●</span>info#mycompany.com
</div>
</div>
</div>
<div class="page-break"></div>
</body>
</html>