raghav710 raghav710 - 2 months ago 8
HTML Question

unable to display table and cell borders while printing

I have a dynamically generated table in an asp.net View

I have used the same code to print another table and it prints..lines and all..

but when i try to print this table i get only the text and no html

here is my code..(i dont have the reputation to post screenshots)


@model AECS1.Controllers.DailyReportModel
@{
ViewBag.Title = "AECS : Daily Report";
}
<html>
<head>
<style >
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;

width: 400px;
}

table.gridtable th {

padding: 8px;
border: 1px solid #666666 ;

background-color: #23819C;
color:white;
}

table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;

}
.aclass {
background-color: #23819C;
color: white;
font-size: 25px;
padding: 2px 2px 2px 2px;
height: 5%;
display: block;
text-decoration: none;
margin-left:10%;
width:10%;

}

</style>
<style media="print">
td,th
{color:black}
</style>
<script>
function printer() {
var divToPrint = document.getElementById("printable");
newWin = window.open("");
newWin.document.write("<h1>Weekly Report</h2>")
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
</script>
</head>
<body>
<div style="text-align:center">
<h2>Daily Report</h2>
<button id="print" onclick="printer()" class="aclass">print</button>
<h3>@ViewBag.date</h3>
@using (Html.BeginForm())
{
@Html.TextBoxFor(m => m.Report_Date, new { @class = "input1", @id = "datepicker", @readonly = "readonly" })
<br />
<input type="submit" value="Get Report" />
@Html.ValidationSummary()
}
@{
int i = 0;
}
<div id="printable">
<table align="center" >

@foreach (var item in ViewBag.list){
i++;
if (@i % 3 == 1)
{
@:<tr>
}

<td>
<table class="gridtable">
<tr>
<th>
UNIT NAME
</th>
<th>
DOCTOR NAME
</th>
<th>
STATUS
</th>
</tr>
@foreach (var item1 in item)
{
<tr>
<td>
@item1.UnitName
</td>
<td>
@item1.dr_name
</td>
<td>
@item1.info
</td>
</tr>
}
</table>
</td>

if (@i % 3 == 0)
{
@:</tr>
}


}
</table>
</div>
</div>
</body>
</html>

Answer Source

Store the css in an external stylesheet, say style.css Link to the printing window.

newWin.document.write('<link rel="stylesheet" href="images/style.css" type="text/css" />');

OR

write the CSS within the DIV (< div id="printable" >) which going to print.

In your code the css part is outside . It should be within the div