unable to display table and cell borders while printing

StackOverflow https://stackoverflow.com/questions/23466703

Question

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>
Was it helpful?

Solution 2

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

OTHER TIPS

I was suffered from same problem, i got issue why it was not print the table border? It because of CSS : "border-collapse: collapse;"

So what i do is use @media and write CSS as below for screen and print.

In your case do as :

@media screen {
   table.gridtable 
   {
       font-family: verdana,arial,sans-serif;
       font-size: 11px;
       color: #333333;
       border-width: 1px;
       border-color: #666666;
       border-collapse: collapse;
       width: 400px;
   }
}

and for print :

@media print{
    table.gridtable {
       font-family: verdana,arial,sans-serif;
       font-size: 11px;
       color: #333333;
       border-width: 1px;
       border-color: #666666;
       width: 400px;
    }
}

in print remove CSS line border-collapse: collapse; Because this is reason for disappearing border in printing. Hope this work for you.

The table is being copied to a new window, and your CSS is not being retained. Pass some relevant CSS across to the new window in your document.write() method.

Like This

$("#printtbl").on('click', function() {
    var printContents = document.getElementById('print-table').innerHTML;
    var originalContents = document.body.innerHTML;

// Your Css
  var htmlToPrint = '' +
    '<style type="text/css">' +
    'table {' +
      'border-spacing: 0;' +
      'border-collapse: collapse;' +
      '}'+
    'table tr {' +
    'border-top: 1px solid gray !important;' +
    '}' +
    '</style>';

    htmlToPrint += printContents;
    var printWindow = window.open('', 'PRINT');
    printWindow.document.write(htmlToPrint);
    printWindow.print();
    printWindow.close();
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top