I have a page with multiple tables on it and I want to have a page break for printing between these tables. If I manually set the element's style to "page-break-after:always" it seems to work.
<table style="page-break-after:always;">
But I'm added the tables dynamically so I need to do it in code ... just don't know how.
(I have very little asp\html experience so this could be a very newbie question)
Thanks!
if you are adding the tables dynamically in JavaScript you can do:
using jQuery:
$('#myTable').css({'page-break-after':'always'});
using DOM methods:
myTableElem.setAttribute('style','page-break-after:always;');
//note, this fails in IE6/IE7/IE8(if not in standards mode) (due to an IE bug)
myTableElem.style.setAttribute('cssText', 'page-break-after:always;');//IE only way
It's likely obvious, but I would recommend using jQuery or a similar library that abstracts away bugs like these so you don't suffer from issues in some/all versions of IE.
Alternatively you can add a css class dynamically...
.page_break_after{
page-break-after:always;
}
then just add the class to whatever you want to add it to:
$('#myTable').addClass('page_break_after');
or natively...
myTableElem.setAttribute('className', 'page_break_after');
If you want to add a page break after every table, then do not define your styling inline (with the style attribute) but in the head of your page or master page:
<head>
<style>
table {
page-break-after: always;
}
</style>
<head>
Or define it in an external css file:
site.css:
table {
page-break-after: always;
}
your html page:
<head>
<link rel="stylesheet" type="text/css" href="site.css" />
</head>
Just add a new item to the Style collection of the dynamically created control:
HtmlTable dynamicTable;
...
dynamicTable.Style.Add("page-break-after","always");