IE10 Border Issue w/ Rowspan while printing

6
votes

Can anyone explain why when printing from IE10, the borders in the following HTML table will not be displayed on the print-out?

Even if you don't have an answer, has anyone else noticed this behavior?

I've been printing to Microsoft XPS Viewer, but it also does not display when printing to a printer.

Here's a similar IE10 print issue, but it's not quite the problem I'm experiencing: IE 10 Missing border segments while printing table elements

<!DOCTYPE html>
<html>
<head>
    <title>Broken IE10 Print Page</title>
    <style>
    table {
        border: 3px solid black;
        font-size: 8pt;
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
    }

    th {
        padding: 2px;
        border: 1px solid black;
    }

    td {
        padding: 2px;
        border: 1px solid black;
    }
    </style>
</head>
<body>
    <table style="width: 975px;">
        <thead>
            <tr>        
                <th>Test1</th>
                <th>Test2</th>
                <th>Test3</th>
                <th>Test4</th>
                <th>Test5</th>
                <th>Test6</th>
                <th>Test7</th>      
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
            <tr>
                <td rowspan="2">
                    Broken in Print
                </td>
                <td>Material</td>
                <td>Material</td>
                <td>0.10000</td>
                <td></td>
                <td></td>            
                <td>Rowspan 2</td>
            </tr>
            <tr>
                <td>Material</td>
                <td>Supplies</td>
                <td>0.20000</td>
                <td>0.1</td>
                <td></td>            
                <td>Manual</td>
            </tr>
            <tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr><tr>
                <td>Test123</td>
                <td></td>
                <td></td>
                <td>0.00000</td>
                <td>0</td>
                <td></td>            
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
2
htmlprintingborderinternet-explorer-10html-table
Good luck with this. My own experiences in developing print stylesheets is that print behaviour is very poorly documented. – Jimmy Breck-McKye
The Internet Explorer Team responded on Microsoft Connect. They are able to reproduce my issue and are investigating it. connect.microsoft.com/IE/feedback/details/797783/… – James Zawacki
Do not use 'px' for borders use 'pt' or 'em' – ppollono
Microsoft responded saying that they've fixed the issue in the latest version of Internet Explorer (IE11). I guess there is no hope for IE10. – James Zawacki

2 Answers

0
votes

Try going to IE > Tools [alt+x] > print > page setup. In the upper left corner, you should see Paper Options. Under that, there is a checkbox titled Print Background Colors and Images. Try printing after enabling that.

0
votes

Despite Microsoft's response, I'm still seeing this problem in IE 11 when my document goes over one page. But I have found a hacky work around.

Remove the rowspan, and any cell that should have had a row span can now have its contents in a span with position: absolute;. Then it's just a matter of using css to remove what shouldn't be there. If you can also use table { border-collapse: collapse; }, you can't even see the break. Here's a complete example:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>IE11 Table</title>
  <style type="text/css">
  td {
    border: 1px solid black;
    padding: 3ex;
  }
  td.rowspan {
    border-bottom: 0 solid transparent;
  }
  td.rowspan span {
    position: absolute;
    margin-top: -1.5ex;
  }
  td.rowspanned {
    border-top: 0 solid transparent;
    color: transparent;
    background-color: transparent;
  }
  </style>
 </head>
 <body>
  <table>
   <tbody>
    <tr><td>A1</td><td>A2</td></tr>
    <tr><td>B1</td><td>B2</td></tr>
    <tr><td>C1</td><td>C2</td></tr>
    <tr><td>D1</td><td>D2</td></tr>
    <tr><td>E1</td><td>E2</td></tr>
    <tr><td class="rowspan"><span>F1<br>F1A<br>F1B<br>F1C<br>F1D</span></td><td>F2</td></tr>
    <tr><td class="rowspanned">G1</td><td>G2</td></tr>
    <tr><td>H1</td><td>H2</td></tr>
    <tr><td>I1</td><td>I2</td></tr>
    <tr><td>J1</td><td>J2</td></tr>
    <tr><td>K1</td><td>K2</td></tr>
    <tr><td>L1</td><td>L2</td></tr>
    <tr><td>M1</td><td>M2</td></tr>
    <tr><td>N1</td><td>N2</td></tr>
    <tr><td>O1</td><td>O2</td></tr>
    <tr><td>P1</td><td>P2</td></tr>
    <tr><td>Q1</td><td>Q2</td></tr>
   </tbody>
  </table>
 </body>
</html>


td {
  border: 1px solid black;
  padding: 3ex;
}
td.rowspan {
  border-bottom: 0 solid transparent;
}
td.rowspan span {
  position: absolute;
  margin-top: -1.5ex;
}
td.rowspanned {
  border-top: 0 solid transparent;
  color: transparent;
  background-color: transparent;
}
<table>
 <tbody>
  <tr><td>A1</td><td>A2</td></tr>
  <tr><td>B1</td><td>B2</td></tr>
  <tr><td>C1</td><td>C2</td></tr>
  <tr><td>D1</td><td>D2</td></tr>
  <tr><td>E1</td><td>E2</td></tr>
  <tr><td class="rowspan"><span>F1<br>F1A<br>F1B<br>F1C<br>F1D</span></td><td>F2</td></tr>
  <tr><td class="rowspanned">G1</td><td>G2</td></tr>
  <tr><td>H1</td><td>H2</td></tr>
  <tr><td>I1</td><td>I2</td></tr>
  <tr><td>J1</td><td>J2</td></tr>
  <tr><td>K1</td><td>K2</td></tr>
  <tr><td>L1</td><td>L2</td></tr>
  <tr><td>M1</td><td>M2</td></tr>
  <tr><td>N1</td><td>N2</td></tr>
  <tr><td>O1</td><td>O2</td></tr>
  <tr><td>P1</td><td>P2</td></tr>
  <tr><td>Q1</td><td>Q2</td></tr>
 </tbody>
</table>