[IE] 在IE下列印超過一頁時，表格有rowspan以上的框線都會消失的問題! (IE10 Border Issue w/ Rowspan while printing)－碎碎念

轉自 https://stackoverflow.com/questions/18322386/ie10-border-issue-w-rowspan-while-printing

https://www.ptt.cc/man/Visual_Basic/DA2B/D147/M.1367646833.A.967.html

2. 網頁中的表格(TABLE)元素有合併列及合併欄，列印時畫面超過一頁時
合併列以前的所有框線都會消失
（IE8, IE9, IE10, IE11 都有這個問題）

解決方法：避免使用rowspan (只能想辦法用CSS去硬解)

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>