Forum Moderators: not2easy
Anyway, I'm writing a stylesheet for a page that's going to be a HUGE list of report records. The user will use this page to print the list and I wanted to make that printed list as easy to look at as possible.
What I'd like to do it take the column header row (which I've tagged with a class) and have it repeated at the top of each printed page. I'm pretty sure it's possible, but I can't figure it out. Is there a way to mess with the margin styles to add an entire class-tagged table row?
Thanks in advance!
it can't really be done properly yet, mainly because a users own print settings will determine where the page breaks,
You could however use a print stylesheet to force the pages to break after a certain size of table (number of rows) this would mean you would still need to take a educated guess as to the size of a table that will fit on most pages better too small than too big anyway..
Setting the headings on the top rows of each of these tables would possibly still have to be a manual job as you still can only force the page break between tables so you need to put a header row at the top of each.
However with the use of the :before or :after pseudo elements [w3.org] it is possible to at least save typing the same headings over and over CSS could generate them. BUT IE doesn't play ball with this :( so it looks like just making loads of table breaking in the right places with the help of some print CSS, is best solution for now?
e.g.
<style type="text/css" media="print">
table.mylist {page-break-after: always;} /* force a page break after a certain length of table *//* generate first row headings for print media */
.col1 span:before {content: " Col One Header ";}
.col2 span:before {content: " Col Two Header ";}
</style><style type="text/css" media="screen">
tr th {display: none;} /* hide all excess headings for screen view */
tr.firstrow th {display: block;} /* bring back first row headings for IE */
html>body tr.firstrow th {display: table-cell;} /* bring back first row headings for FF and Opera *//* generate first row headings for screen media */
tr.firstrow .col1 span:before {content: " Col One Header ";}
tr.firstrow .col2 span:before {content: " Col Two Header ";}
</style></head>
<body>
<table summary="list of records" class="mylist" border="1" width="100%">
<tr class="firstrow">
<th class="col1"><span></span></th><th class="col2"><span></span></th>
</tr>
<tr><td>col 1 data</td><td>col 2 data</td></tr>
<tr><td>col 1 data</td><td>col 2 data</td></tr>
</table>
<table summary="list of records" class="mylist" border="1" width="100%">
<tr><th class="col1"><span></span></th><th class="col2"><span></span></th></tr>
<tr><td>col 1 data</td><td>col 2 data</td></tr>
<tr><td>col 1 data</td><td>col 2 data</td></tr>
</table>
<table summary="list of records" class="mylist" border="1" width="100%">
<tr><th class="col1"><span></span></th><th class="col2"><span></span></th></tr>
<tr><td>col 1 data</td><td>col 2 data</td></tr>
<tr><td>col 1 data</td><td>col 2 data</td></tr>
</table>
That example will work in FF/opera showing how the generated content might work.. though you would need to physically type each row heading for IE so this is just a sample for you to play with..
maybe someone else has another way it could be done?
Suzy
Thank you so much! Unfortunately, the client that I'm working on this for is IE based, so I think that they're going to have to learn to read these reports without the column headings on each page. Thanks again!
h.
