Tables showing misaligned headers during browser print option

reubenmk

Hi

I have an issue where when i display the table and i directly try to print from the browser (not the print option of data tables) the headers get misaligned and the full table does not display properly. In any browser i am facing this issue. Is there any solution for this? The below is the code which i use to initialize the table.

[code]

$(document).ready( function () {
$('#tradesumgrp').dataTable( {
"sScrollY": "400px",
"bPaginate": false,
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "copy_cvs_xls_pdf.swf",
// "aButtons": ["copy","xls",{"sExtends": "pdf","sPdfOrientation": "landscape" } ]
"aButtons": [
{
"sExtends": "print",
"sMessage": ' Trades Summary from <%=str%> to <%=fstr%>',
"bShowAll": true
},
{
"sExtends": "copy",
"sButtonText": "Copy to Clipboard"
}
,{
"sExtends": "xls",
"sButtonText": "ExporttoExcel"
} ]
}
} );
} );

[/code]

reubenmk

NOTE: While i view the table on the browser there is no issue at all. Only when i take the print/print preview i see the tables headers are misaligned and its not displayed completely. When i use the data table print option there is no issue. But some clients dont use that option. They directly view the table and try to use the browser print option from that page. Another issue i noticed is in IE8 when i click on the data table print option, the table to printed displays as whole and if i click on the header -the header disappears.

allan

> I have an issue where when i display the table and i directly try to print from the browser (not the print option of data tables) the headers get misaligned and the full table does not display properly.

Does this occur only when printing when not using the TableTools print option? But presumably it doesn't happen when you do use the TableTools print option (as TableTools has code to deal with this).

Basically the issue is that the table header and body are two different tables when scrolling is enabled - which will be why the browser is computing the print display differently - it obviously overrides the computer screen display values. TableTools deals with this in its print view by polling the header into the body's table, thus you have only one table to print.

I'm not aware of any solution to solve this particular problem - the browsers are overriding the styles which tell them that the columns should be the same widths in the two tables.

Sorry I don't have better news.

Allan

reubenmk

hi allan,
Even if i remove the scrolling part it doesnt show proper data in the print preview. I guess the table tools print option is my only choice

reubenmk

I now know how to display a blank page when the user clicks the print option from the browser.
I used the following code.
[code]
BODY {display:none;visibility:hidden;}
[/code]
But i want it to display when then i click the table tools print option. How can i do that?
I tried the below code but it does not work.
[code]
{
"sExtends": "print",
"sMessage": 'BODY {display:none;visibility:hidden;} Trades Detail from <%=str%> to <%=fstr%>',
"bShowAll": true
},
[/code]
How can i achieve this?it shud display blank page when the user clicks print option from the browser(before clicking the table tools print option) and only make the table visible in the print preview if the table tools print option is clicked..

reubenmk

Correction



[quote]reubenmk said:  "sMessage": 'BODY {display:anything;visibility:visible;} Trades Detail from <%=str%> to <%=fstr%>',[/quote]

reubenmk

[code] "sMessage": 'BODY {display:anything;visibility:visible;} Trades Detail from <%=str%> to <%=fstr%>',
[/code]