I have a row in my HTML Table which is overlapping my div in footer while printing it in A4 page.
How to fix it so it can break before footer and continue in the next page and so on.
I've googled and found many solution like this but all of theme didn't worked for me.
Margin while printing html page
My Style
<head>
<style>
#media print {
h1 {
page-break-after: always;
}
div.divFooter {
position: fixed;
bottom: 0;
}
.pagebreak {
page-break-before: always;
}
table {
height: 500px;
overflow-y: scroll;
}
}
p {
white-space: pre-line;
white-space: pre-wrap;
}
#main_table,#id_table{
border: 2px solid black;
border-collapse: collapse;
table-layout: fixed;
page-break-inside: auto;
width: 100%;
text-align:center;
margin-top:-18px;
}
</style>
</head>
My view
<body dir="rtl" style="margin-left: 0.98in;margin-right:0.98in">
<div>
<br>
<div>
<table id="main_table" dir="rtl" border="1">
<tr style="font-size: 20px;font-weight:bold;height:40px">
<td style="width: 47.5%">first column</td>
<td style="width: 7%">second column</td>
<td style="width: 47.5%">third column</td>
</tr>
<tr>
<td style="border-bottom: hidden;text-align:right">
<p style="text-align: right;font-size: 19px;margin-right:30px;font-weight:bold">{{$result[0]->name}}</p>
</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td style="vertical-align: top;border-top:hidden;height:60vh" dir="rtl">
<p style="font-size: 16px;margin-right:25px;margin-left:25px;text-indent: 30px;text-align:right" dir="rtl" lang="ar">{{$result[0]->document_text}}</p>
<br>
</td>
</tr>
</table>
</div>
<br>
<br>
<div class="divFooter" style="width:80%;padding:25">
<hr style="width: 98%;border-radius: 5px;border: 3px solid"/>
<p style="margin-right:25px;margin-left:25px;font-size:14px">sdfsdfsd fasdfh klhasdkjf sakdljfh askjfdhsakdjfh askjdfh a </p>
</div>
</body>
it Show look like this while printing it in A4 page
After searching a lot I found this link
https://plnkr.co/edit/lWk6Yd?preview
Very use full
Style
/* Styles go here */
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
#page {
margin: 20mm
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
Body
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Related
Problem
I am working on a project in which I need to convert HTML to a PDF. I am doing this simply with the browsers print capabilities. The problem came when I added headers and footers to my document using the method described here.
In my document I am also using css columns, and for some reason, only when there is at least one full column AND less than one page of content being printed, it adds a blank page at the beginning and end of the document leaving me with 3 pages. This is not ideal as I am aiming to automate this process in the future and having extra blank pages with just the header and footer being printed is not acceptable.
I initially thought there must be some invisible margin causing the blank pages to be added, but as soon as it gets to more than one page of content the blank pages disappear and the output is as expected.
I am not proficient with CSS at all so if someone has any insight as to why this is happening, and preferably how I can solve it, I would be very grateful to hear it.
Here is the HTML and CSS which causes the extra blank pages when printed. To see how it reverts back to normal, just add more content to the page div so that it creates more than one page of content.
EDIT: To see the problem you'll have to run this code in the firefox browser since chrome doesn't support the column-fill property meaning the columns will be balanced and none of them will be filled.
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
columns: 3;
column-fill: auto;
}
#page {
margin: 20mm
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<!-- <div class="page">PAGE 1</div>
<div class="page">PAGE 2</div> -->
<div class="page" style="line-height: 1;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
<!-- fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum. -->
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
In CSS, what is the correct way of forcing to move up the vertical margin for all the texts in each cell. So all the content in the cells (texts) are moved to the top vertically?
For example, this html and CSS
table {
padding: 10px;
border: 0px solid black;
border-radius: 10px;
border-spacing: 75px 0px;
padding-left: 50px;
}
td {
height: 20px;
padding: 10px;
width: 50%;
border-top: none;
}
tr:not(:last-child) td {
border-bottom: none;
}
<table border="1" class="dataframe">
<thead>
<tr style="text-align: unset;">
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat
est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum </td>
<td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
</tr>
<tr>
<td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
<td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
</tr>
<tr>
<td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
<td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
</tr>
<tr>
<td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
<td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
</tr>
</tbody>
</table>
Generate the following tables:
How can I move a little bit up the text on the tables to produce something like this:
After reading this question, I tried to adjust the height, padding, and table top as follows:
padding: 10px;
height: 80px;
vertical-align:top;
vertical-align:super;
padding-bottom: -1em;
However, none of the above options move the text upper. As you can see, in the previous image the upper white spaces were reduced by moving up the texts, while the below blank spaces are increased. How can I move up the texts like in the above image?
Using vertical-align: super seems to do the trick. Try this out.
table {
padding: 10px;
border: 0px solid black;
border-radius: 10px;
border-spacing: 75px 0px;
padding-left: 50px;
}
td {
vertical-align: text-top;
/*height: 20px; */
height: 100%;
padding: 10px;
width: 50%;
border-top: none;
}
tr:not(:last-child) td {
border-bottom: none;
}
<table border="1" class="dataframe">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat
est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum </td>
<td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
</tr>
<tr>
<td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
<td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
</tr>
<tr>
<td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
<td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
</tr>
<tr>
<td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
<td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
</tr>
</tbody>
</table>
To make things look similar to the layout in the second image you included, check out the code below. The reason why this isn't possible with a single <table> is because the <td> elements text are stored in rows together and changing their position in the row with something like position: absolute won't be pretty (or exact).
To allow the text to be laid out in a basic document flow (Normal flow), we can't have the column1 and column2 <td> elements in the same row or they will be confined to that specific rows content box. It becomes quite a difficult CSS solution to make it work with two separate <table> elements as their content box height will be different unless they have the same amount of text so here is an example of the layout you wanted but without using a table.
Using CSS Flexbox the height of each child container will be the same regardless of whether they have the same amount of content.
.row {
display: flex;
}
.row h3 {
text-align: center;
border-bottom: solid;
width: 100%;
margin: 0;
padding: .5rem 0;
}
.row .layout-one div,
.row .layout-two div {
padding: .5rem;
}
.layout-one, .layout-two {
border: .1rem solid #000;
border: solid;
flex: 1; /* make flex items have equal width */
margin: 0 1rem;
}
<section class="row">
<div class="layout-one">
<h3>Col 1</h3>
<div>
<p>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat
est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum </p>
<p>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</p>
<p>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</p>
<p>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</p>
</div>
</div>
<div class="layout-two">
<h3>Col 2</h3>
<div>
<p>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</p>
<p>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</p>
<p>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</p>
<p> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</p>
</div>
</div>
</section>
Check out my reduced test case on CodePen.
My question: How do I position the table so that it moves south 350px while also ensuring that the paragraph text wraps around seamlessly?
The restriction is that the table elements in the HTML must remain at the top above the first paragraph element and cannot be shifted half way down the web page between the paragraph elements. The table must be above the first paragraph tag.
If I uncomment line 12 (the margin-top property) in the CSS, the table moves south 350px (which is where I need it to be). However the problem then is that the paragraph text to the left doesn't wrap.
How do I position the table so that it is moved down 350px but also ensure text wraps above, to the side and below?
I've already leveraged Chris Coyier's almanac on floats by Sara Cope.
I've been wrestling by using different float values back and forth without reaching where I need to be.
For what it is worth, here is the CSS from my testcase:
body {
width: 1024px;
margin: 1em auto;
}
table {
font-family: arial, sans-serif;
float: right;
/* display: inline-block;*/
margin-right: 100px;
padding: 50px;
/* margin-top: 350px; */
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
border: 1px dashed black;
}
tr:nth-child(even) {
background-color: #dddddd;
}
Although without moving we can't move the table down and wrap the text around it, but there is a magical way through you can do it without moving html's code.
We can achieve your thoughts by inserting a div with an id of hidden as:
<div id="hidden"></div>
And then all the css works begins, As we target hidden div as:
#hidden{
float:left;
clear: both;
width: 0;
height: 300px;
visibility: hidden;}
Thus by making it float to left which is alternate to our current table and by putting width 0 and height of 300px (adjustable as per the needs) having visibility of hidden, So it will be there but not visible but just exists with a height of 300px.
As our table css will be:
#visibletable{
float:right;
clear: both;}
We make our table to float alternate to the hidden div and clear both.
And tada ! we did it !
You can try by yourself by running the code below.
body {
width: 1024px;
margin: 1em auto;
}
#hidden{
float:left;
clear: both;
width: 0;
height: 300px;
visibility: hidden;
}
#visibletable{
float:right;
clear: both;
margin-right: 20px;
padding: 10px;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
border: 1px dashed black;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<h3>Heading</h3>
<div id="hidden"></div>
<table id="visibletable">
<tr>
<td colspan="2">Posts Top 10 Word Counts</td>
</tr>
<tr>
<th>Words</th>
<th>Quantity</th>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
<tr>
<td>{{ word.0 }} </td>
<td>{{ word.1 }} </td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus sodales dignissim. Nam aliquam ante nec nisl molestie ultrices. Etiam aliquet aliquam bibendum. In hac habitasse platea dictumst. Vivamus condimentum enim sapien, et aliquam sapien aliquam in. Maecenas fringilla ultricies neque at condimentum. Praesent facilisis iaculis velit sit amet euismod.</p>
<p>Vivamus sed felis eu nisl molestie tincidunt eget lobortis ligula. Nam libero felis, placerat sed eleifend vel, elementum non enim. Maecenas sed pulvinar nunc. Maecenas quam orci, dictum quis mattis sed, finibus ultrices tellus. Donec consectetur tristique ante, et volutpat eros semper sodales. Nam ac leo odio. Phasellus ipsum justo, ultricies a dui a, feugiat mattis dui. Vivamus eu tellus ac eros placerat ultricies. Nunc mauris quam, feugiat et faucibus ac, porta ac sapien. Vestibulum vitae lacus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In odio libero, accumsan vitae eros et, ornare sagittis metus. Maecenas nec eros vel nisl ultricies varius vel sit amet mauris. Nullam sollicitudin non tortor et vestibulum.</p>
<p>Ut lacinia diam tincidunt lacus bibendum viverra id sed purus. Aliquam commodo ante sodales, laoreet dui eu, sodales massa. Aenean vitae turpis ante. Praesent id dolor nunc. Morbi id lectus accumsan, pulvinar nisi vitae, rhoncus diam. Cras vestibulum rutrum elit, in placerat arcu condimentum vel. Etiam semper lacinia mi, vel ultrices turpis tristique ut. Etiam scelerisque sagittis nisi, rhoncus faucibus dui pharetra in. Nullam vehicula, orci ut facilisis iaculis, dolor metus faucibus enim, nec ornare metus odio ut lectus. Sed eu gravida eros, varius semper magna. Sed nec sapien quis enim mollis blandit. Nunc scelerisque massa vel quam venenatis, nec bibendum arcu aliquam. Nulla sed scelerisque lacus. In iaculis nunc congue dapibus efficitur.
<p>Pellentesque tempor mattis ante, vitae congue sem vulputate vitae. Praesent semper imperdiet leo vel feugiat. Pellentesque et sodales nunc. Nunc venenatis viverra urna at pellentesque. Sed pulvinar mollis tortor luctus luctus. Nullam blandit at lorem at elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus felis, molestie nec ex id, sollicitudin iaculis sapien. Phasellus egestas, justo et molestie hendrerit, enim odio dignissim sapien, eu vestibulum metus erat ac velit. Nunc vehicula est tellus, nec fermentum mauris dictum nec. Maecenas fringilla porttitor lorem, et pretium enim commodo eget. Vestibulum finibus ornare diam ut lacinia. Nulla at blandit eros.
<p>Cras ornare feugiat mattis. Proin vitae consectetur turpis. Fusce bibendum dui quis tortor semper, non hendrerit nibh fringilla. Sed pulvinar tortor quam, non euismod risus auctor id. Phasellus vulputate neque vitae nisl dapibus, eleifend euismod est hendrerit. Nullam eu placerat turpis. Nam pretium ac lorem quis molestie. Vestibulum ut mi vehicula, euismod justo eu, scelerisque nibh. Cras vel ante ac dolor eleifend molestie. Nullam in ante egestas, aliquam diam eu, sodales nulla. Quisque euismod ante lectus, in vestibulum neque accumsan eu. Proin et eros non felis hendrerit faucibus et vel lectus. Vestibulum vitae dui in sem convallis dignissim ac ac ante.
<p>Donec sollicitudin velit quis justo consectetur fringilla. Pellentesque in neque dignissim, viverra risus et, vehicula lacus. Aliquam at iaculis nibh, sed rutrum ipsum. Donec eget auctor arcu. Sed id ipsum justo. Phasellus tincidunt tempus diam, ac aliquam augue pretium vel. Quisque mattis et metus ut consequat. Nunc quis feugiat sapien. Sed vel quam sed libero iaculis varius.
Thank You #UmarGit
Im trying to develop html with sticky header and footer at all pages...
This Source Ultimate printable HTML layout with repeating header & footer on every page is best example i could find for actaully applicable but im facing a small issue with it
Im converting the HTML string to A4 Size paper for printing the document...
<!DOCTYPE html>
<html>
<head>
<style>
/* Styles go here */
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
#page {
size: A4;
margin: 5 auto;
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
</style>
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
if
.page-header, .page-header-space {
height: 210px;
}
its working perfect but if i give the height more than 210 / 220 px
for example
.page-header, .page-header-space {
height: 250px;
}
the content of the body is hidding behand the header...
what could be the possible solution to overcome the problem.
Example of the error from actual output
Output with 210px or Below
Output with 250px
Thank you for your precious time.
I'm trying to create a web page table layout which will look something like this:
Link to the image http://kelostrada.pl/upload/test.png
and I would appreciate your help.
I have created something like this right now and it works in Firefox, but whole table slides down in Chrome and Internet Explorer:
<div style="width: 1000px;">
<img src="lupa.png" style="z-index: 10; border-width: 0px; width: 200px; top: 30px; right: 30px; position: relative; float: right;" />
<table style="width: 100%; border-color: #6788bb; border-style: solid; border-width: 1pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr style="background-color: #6788bb;">
<td style="padding: 40px; color: #FFFFFF; font-family: calibri; font-size: 18pt;">Wywiad Miesiąca
</td>
</tr>
<tr style="background-color: white;">
<td style="padding: 20px;">
<div style="width: 200px; height: 100px; float: right"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum urna justo, in mattis libero hendrerit sit amet. Nullam ac ultricies felis. Proin pulvinar nulla sapien, in molestie augue pharetra vel. Nam et elit quam. Donec non erat lobortis, ornare ligula a, blandit nisl. Vivamus ut pulvinar tortor, eget scelerisque sem. Quisque faucibus rutrum neque, at dapibus enim feugiat id.</p>
<p>
Morbi vel justo ultrices, fermentum lectus eget, condimentum arcu. Nullam commodo, neque eget fringilla fringilla, purus velit pretium nulla, vel bibendum augue enim ut lorem. Vivamus feugiat augue lorem, tempus pharetra sapien blandit id. Vivamus orci neque, laoreet vitae convallis id, malesuada et sem. Vestibulum tincidunt in mi eu ultrices. Praesent quis purus mattis, facilisis elit a, congue sapien. Nullam arcu nisi, sagittis eget nisi sed, posuere tempor odio. Aliquam vitae lorem nunc. Fusce ante libero, aliquam vel sollicitudin quis, pellentesque at mauris. Suspendisse quis arcu at odio gravida porttitor et at felis.
</p>
</td>
</tr>
</tbody>
</table>
</div>
Does anyone have any suggestions how should I accomplish the result I want correctly?
If you want here is the webpage and you can test it how does it work in your browser: http://kelostrada.pl/upload/HtmlPage.html
You need to make the div with 1000px; to have a position:relative; and the img tag inside it to have a position:absolute; instead of position:relative;
For Instance, this snippet code is from the link that you had provided. Just copy this and paste it in your HTML from <body> to </body> tag and it will work.
Here is the WORKING EXAMPLE for the same.
<body>
<span class="test">TESTOWY NAPIS</span>
<div style="width:1000px; position:relative;">
<img src="lupa.png" style="z-index: 10; border-width: 0px; width:200px; top: 30px; right: 30px; position: absolute; float: right;"> <table style="width: 100%; border-color: #6788bb; border-style: solid; border-width: 1pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr style="background-color: #6788bb;">
<td style="padding: 40px; color: #FFFFFF; font-family: calibri; font-size: 18pt;">Wywiad Miesiąca
</td>
</tr>
<tr style="background-color: white;">
<td style="padding: 20px;">
<div style="width:200px;height:100px;float:right"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum urna justo, in mattis libero hendrerit sit amet. Nullam ac ultricies felis. Proin pulvinar nulla sapien, in molestie augue pharetra vel. Nam et elit quam. Donec non erat lobortis, ornare ligula a, blandit nisl. Vivamus ut pulvinar tortor, eget scelerisque sem. Quisque faucibus rutrum neque, at dapibus enim feugiat id.</p>
<p>
Morbi vel justo ultrices, fermentum lectus eget, condimentum arcu. Nullam commodo, neque eget fringilla fringilla, purus velit pretium nulla, vel bibendum augue enim ut lorem. Vivamus feugiat augue lorem, tempus pharetra sapien blandit id. Vivamus orci neque, laoreet vitae convallis id, malesuada et sem. Vestibulum tincidunt in mi eu ultrices. Praesent quis purus mattis, facilisis elit a, congue sapien. Nullam arcu nisi, sagittis eget nisi sed, posuere tempor odio. Aliquam vitae lorem nunc. Fusce ante libero, aliquam vel sollicitudin quis, pellentesque at mauris. Suspendisse quis arcu at odio gravida porttitor et at felis.
</p>
</td>
</tr>
</tbody> </table>
</div>
</body>
I have checked the same at my end and it works perfectly.
Hope this helps.
I replaced every table element with divs. It looks fine to me.
jsfiddle
<div style="width: 1000px;">
<img src="http://placehold.it/200x200" style="z-index: 10; border-width: 0px; width: 200px; top: 30px; right: 30px; position: relative; float: right;" />
<div style="width: 100%; border-color: #6788bb; border-style: solid; border-width: 1pt; border-spacing: 0; border-collapse: collapse;">
<div style="background-color: #6788bb;">
<div style="padding: 40px; color: #FFFFFF; font-family: calibri; font-size: 18pt;">Wywiad Miesiąca
</div>
</div>
<div style="background-color: white;">
<div style="padding: 20px;">
<div style="width: 200px; height: 100px; float: right"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum urna justo, in mattis libero hendrerit sit amet. Nullam ac ultricies felis. Proin pulvinar nulla sapien, in molestie augue pharetra vel. Nam et elit quam. Donec non erat lobortis, ornare ligula a, blandit nisl. Vivamus ut pulvinar tortor, eget scelerisque sem. Quisque faucibus rutrum neque, at dapibus enim feugiat id.</p>
<p>
Morbi vel justo ultrices, fermentum lectus eget, condimentum arcu. Nullam commodo, neque eget fringilla fringilla, purus velit pretium nulla, vel bibendum augue enim ut lorem. Vivamus feugiat augue lorem, tempus pharetra sapien blandit id. Vivamus orci neque, laoreet vitae convallis id, malesuada et sem. Vestibulum tincidunt in mi eu ultrices. Praesent quis purus mattis, facilisis elit a, congue sapien. Nullam arcu nisi, sagittis eget nisi sed, posuere tempor odio. Aliquam vitae lorem nunc. Fusce ante libero, aliquam vel sollicitudin quis, pellentesque at mauris. Suspendisse quis arcu at odio gravida porttitor et at felis.
</p>
</div>
</div>
</div>