Repeat table headers in print mode
This is what the THEAD element is for. Official docs here.
Having Google Chrome repeat table headers on printed pages
I believe this is a bug in Chrome.
HTML table should repeat header on every page and Sections should not be broken into 2 pages
You can accomplish what you want with some css
and html
:
1) Use thead
tags. As the doc says:
(...) Also, when printing a large table that spans multiple pages,
these elements can enable the table header and footer to be printed at
the top and bottom of each page.
2) You can use the page-break-inside
property. See more here.
If you have any trouble applying that in your project, feel free to edit your question with details of what you did and what's the unexpected behavior.
Edit:
About the margin, i'm not sure why but it seens we can't add margin to that element... but you can use padding for that. IE:
<style type="text/css">
... your css ...
thead tr {
padding-top: 100px;
}
</style>
Related Topics
Sass Variable in CSS Calc() Function
How to Make a Sticky Footer Using Css
Using Rails 3.1 Assets Pipeline to Conditionally Use Certain Css
What's the Difference Between CSS Classes .Foo.Bar (Without Space) and .Foo .Bar (With Space)
Css Media Queries - Order Matters
What's the Difference Between Inline Styles VS Classes
Changing Font Colour in Textboxes in Ie Which Are Disabled
Stylesheet Not Updating When I Refresh My Site
Internet Explorer @Font-Face Is Failing
How to Change Btn Color in Bootstrap
How to Write a CSS Hack For Ie 11
Ie8 Display Inline-Block Not Working
Offset a Background Image from the Right Using Css
Dynamically Change Color to Lighter or Darker by Percentage Css
How to Store Inherit Value Inside a CSS Variable (Aka Custom Property)
Css Best Practice About Id and Class