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>
Related
I currently have following implementatin where I want the body of the table to be scrollable. However, the column widths are all of equal width and I am trying to figure out how to achieve a flexible tablecell width based on content, while keeping the body's scrolling. ideas?
.modal {
height: 300px;
}
.first {
height: 100%;
}
table.list {
border-collapse: collapse;
width: 100%;
height: 100%;
}
thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
thead {
font-weight: bold;
border-bottom: 1px solid #ccc;
height: 40px;
}
th {
padding: 0 $now-global-space--sm 0 $now-global-space--md;
text-align: left;
word-break: break-word;
hyphens: auto;
}
tbody {
overflow: auto;
display: block;
height: calc(100% - 40px);
}
tr {
line-height: 1.5;
border: none;
border-collapse: none;
min-height: 40px;
}
td {
min-height: 40px;
min-width: 40px;
padding: 4px;
text-align: left;
word-break: break-word;
hyphens: auto;
}
tr:nth-child(2n) td {
background-color: red;
}
tr:hover td {
background-color: pink;
}
<div class="modal">
<div class="first">
<table class="list" role="grid">
<thead>
<tr role="row">
<th role="columnheader">Date</th>
<th role="columnheader">Action</th>
<th role="columnheader">Comment</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td role="gridcell">Mar 24</td>
<td role="gridcell">somoene</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 23</td>
<td role="gridcell">someone</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 22</td>
<td role="gridcell">someone</td>
<td role="gridcell">dd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 21</td>
<td role="gridcell">someone</td>
<td role="gridcell">asd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 20</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadasdsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 14</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadsadsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 7</td>
<td role="gridcell">lala</td>
<td role="gridcell">asdasdsadsa</td>
</tr>
</tbody>
</table>
</div>
</div>
javascript, dispay:grid/contents could be options, but a wrapper and position:sticky could be a compromise to avoid breaking the table-layout , here is below a demo of the idea
.modal {
height: 300px;
border:solid;
}
.first {
height: 100%;
position: relative;
overflow: auto;
}
table.list {
border-collapse: collapse;
width: 100%;
height: 100%;
}
thead {
font-weight: bold;
border-bottom: 1px solid #ccc;
height: 40px;
}
thead tr {
position: sticky;
top: 0;
background: white;
box-shadow: 0 0 5px;
}
th {
text-align: left;
word-break: break-word;
hyphens: auto;
}
tr {
line-height: 1.5;
}
td {
height: 40px;
width: 40px;
padding: 4px;
text-align: left;
word-break: break-word;
hyphens: auto;
}
tr:nth-child(2n) td {
background-color: red;
}
tr:hover td {
background-color: pink;
}
<div class="modal">
<div class="first">
<table class="list" role="grid">
<thead>
<tr role="row">
<th role="columnheader">Date</th>
<th role="columnheader">Action</th>
<th role="columnheader">Comment</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td role="gridcell">Mar 24</td>
<td role="gridcell">somoene</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 23</td>
<td role="gridcell">someone</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 22</td>
<td role="gridcell">someone</td>
<td role="gridcell">dd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 21</td>
<td role="gridcell">someone</td>
<td role="gridcell">asd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 20</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadasdsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 14</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadsadsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 24</td>
<td role="gridcell">somoene</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 23</td>
<td role="gridcell">someone</td>
<td role="gridcell">ddddd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 22</td>
<td role="gridcell">someone</td>
<td role="gridcell">dd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 21</td>
<td role="gridcell">someone</td>
<td role="gridcell">asd</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 20</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadasdsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 14</td>
<td role="gridcell">someone</td>
<td role="gridcell">asdasdsadsadsadsa</td>
</tr>
<tr role="row">
<td role="gridcell">Mar 7</td>
<td role="gridcell">lala</td>
<td role="gridcell">asdasdsadsa</td>
</tr>
</tbody>
</table>
</div>
</div>
I need help scaling down the overall size of the table to fit all screen sizes, most sizes I've covered but can't scale down for mobile screen sizes 600 or less. I mostly use flex box in the media query but can't get the size down less that 600. i'm missing something but can't put my finger on it.
See my code and please advise what i'm missing. any help i'm grateful for.
I'll kick myself i'm sure..
.table {
border-collapse: collapse;
border-spacing: 0;
margin: 0px auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.table td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.table th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.table .index-table {
border-color: inherit;
text-align: center;
vertical-align: middle
}
#media screen and (max-width: 767px) and (max-width: 1025px)and (max-width: 300px) {
.table {
overflow-x: auto;
}
.index-table {
width: auto !important;
}
}
<table class="table">
<tr>
<th class="index-table" colspan="15">Seattle</th>
</tr>
<tr>
<td class="index-table" colspan="15">Hinged Shutter Specification</td>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="3">Louver Size</td>
<td class="index-table" colspan="8">Width</td>
<td class="index-table" colspan="4" rowspan="2">Height</td>
</tr>
<tr>
<td class="index-table" colspan="2" rowspan="2">Min</td>
<td class="index-table" colspan="6">Max</td>
</tr>
<tr>
<td class="index-table" colspan="2">Single Hung</td>
<td class="index-table" colspan="2">Bi-Fold</td>
<td class="index-table" colspan="2">Multi-Fold</td>
<td class="index-table" colspan="2">Min.</td>
<td class="index-table" colspan="2">Max*</td>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="2">47mm</td>
<td class="index-table" colspan="2" rowspan="10">152mm</td>
<td class="index-table" colspan="2" rowspan="2">600mm</td>
<td class="index-table" colspan="2" rowspan="10">600mm</td>
<td class="index-table" colspan="2" rowspan="10">N/A</td>
<td class="index-table" colspan="2" rowspan="10">250mm</td>
<td class="index-table" colspan="2" rowspan="10">300mm</td>
</tr>
<tr>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="2">63mm</td>
<td class="index-table" colspan="2" rowspan="8">750mm</td>
</tr>
<tr>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="2">76mm</td>
</tr>
<tr>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="2">89mm</td>
</tr>
<tr>
</tr>
<tr>
<td class="index-table" colspan="3" rowspan="2">114mm</td>
</tr>
<tr>
</tr>
</table>
All you need to do is making your website/page mobile friendly. To do that you have to setup the viewport, You can do so by adding:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head tag in your html file and your good to go. Read more about it here.
I'm trying to automatically expand the rotated columns automatically when there is more text.
I have tried a variety of css such as removing the tranform-origin or using translateX(-50%) translateY(-50%) rotate(-90deg); options.
I wondered if I am missing anything?
Sample of code below is what I'm working on.
.tcentre {
text-align: center;
}
/*Events Matrix*/
.matrix table,
.matrix td,
.matrix th {
border-spacing: 0;
border: 1px solid;
text-align: left
}
.matrix .vert>th:nth-child(1n+3) {
position: relative;
height: 150px;
min-width: 40px;
padding: 4px;
}
.matrix .vert>th {
overflow: hidden;
}
.matrix .vert>th>div>div {
height: 100%;
line-height: 18px;
width: 150px;
position: absolute;
bottom: -145px;
/*border: 1px solid blue; */
transform: rotate(-90deg);
transform-origin: top left;
}
.matrix .tbottom {
vertical-align: bottom !important;
text-align: left !important;
}
<DIV id="content" class="matrix">
<table>
<thead>
<tr class="vert">
<th class="tbottom" style="Width: 100px;">Part</th>
<th class="tbottom" style="Width: 100px;">Name</th>
<th style="Width: 20px;">
<div>
<div>Park<br>2018-08-12</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>War Memorial Lots more text in this cell<br>2018-08-19</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>Charity Collection<br>2018-10-13</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>Concert<br>2018-10-28</div>
</div>
</th>
<th style="Width: 20px;">
<div>
<div>Remembrance<br>2018-11-10</div>
</div>
</th>
</tr>
<tr>
<td class="nowrap">Score</td>
<td class="nowrap">Person 1</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-Y">Y</td>
</tr>
<tr>
<td class="nowrap">Solo Cornet</td>
<td class="nowrap">Person 2</td>
<td class="tcentre colour-Y">Y</td>
<td class="tcentre colour-" />
<td class="tcentre colour-" />
<td class="tcentre colour-" />
<td class="tcentre colour-" />
</tr>
</thead>
</table>
</Div>
I am trying to align my table2 to the right using the align="right" attribute of table, however, it's not exactly aligning next to the table1, as shown in the JSFiddle here. Instead it is getting aligned next to the Third Heading which I don't want.
I want table 1 and table 2 to be next to one another and then Heading 3 should come below it.
Another issue, I was trying to resolve is the position of the Heading 2 with the float:right as shown below. It's not going to extreme right.
.enc-data-table {
margin: 0 0 45px 0;
}
.enc-data-table th {
font-size: 12pt;
/*font-weight: 700;*/
padding: 0 5px 5px 0;
text-align: right;
}
.enc-data-table td {
font-size: 12pt;
padding: 0 0 5px 0;
}
h3 {
font-size: 20px;
}
h3 {
width: 50%;
height: 40px;
margin: 0;
padding: 0;
display: inline;
}
hr {
width: 100%
}
<h3>Heading 1</h3>
<h3 style="float:right">Heading 2</h3>
<hr/>
<table class="enc-data-table">
<tr>
<th>Location:</th>
<td >A</td>
</tr>
<tr>
<th>Type:</th>
<td >B</td>
</tr>
<tr>
<th>Dates:</th>
<td >Today</td>
</tr>
<tr>
<th>Reason for visit:</th>
<td >D</td>
</tr>
</table>
<table align= "right" class="enc-data-table">
<tr>
<th > Number:</th>
<td >1111</td>
</tr>
<tr>
<th >Plan Information:</th>
<td >1111</td>
</tr>
<tr>
<th >Date of service:</th>
<td >Today</td>
</tr>
<tr>
<th >Location Description:</th>
<td >USA</td>
</tr>
</table>
<h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
<hr />
Do you want something like this? To set the table alignment properly I recommend setting the th and td elements width separetely!
.enc-data-table th{
width:20%
}
.enc-data-table tr{
width:80%
}
.enc-data-table {
margin: 0 0 45px 0;
width: 50%;
}
.enc-data-table th {
font-size: 12pt;
/*font-weight: 700;*/
padding: 0 5px 5px 0;
text-align: right;
}
.enc-data-table td {
font-size: 12pt;
padding: 0 0 5px 0;
}
h3 {
font-size: 20px;
}
h3 {
width: 50%;
height: 40px;
margin: 0;
padding: 0;
display: inline;
}
hr {
width: 100%
}
/*.enc-data-table th{
width:20%
}
.enc-data-table tr{
width:80%
}*/
<h3>Heading 1</h3>
<h3 style="float:right">Heading 2</h3>
<hr/>
<table class="enc-data-table" align="left">
<tr>
<th>Location:</th>
<td>A</td>
</tr>
<tr>
<th>Type:</th>
<td>B</td>
</tr>
<tr>
<th>Dates:</th>
<td>Today</td>
</tr>
<tr>
<th>Reason for visit:</th>
<td>D</td>
</tr>
</table>
<table align="right" class="enc-data-table">
<tr>
<th> Number:</th>
<td>1111</td>
</tr>
<tr>
<th>Plan Information:</th>
<td>1111</td>
</tr>
<tr>
<th>Date of service:</th>
<td>Today</td>
</tr>
<tr>
<th>Location Description:</th>
<td>USA</td>
</tr>
</table>
<h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
<hr />
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;
}