Question

所以我一直在处理仅在IE 10中打印表格元素的问题，其中部分边框将丢失/截止。奇怪的部分是看起来只是tbody的第一行，只有该行的第一个和最后一个单元格受到影响。

这里有一些我到目前为止发现的事情：

屏幕上的表格看起来很好，但只有在打印时才会丢失边框。
我在标准和Quirks模式下得到了相同的行为。
看起来它是使用边框折叠，单元格和表格元素上的边框以及使用thead / tbody的组合。如果我删除任何这些部分，边框将重新出现，一切看起来都应该如此。

这是我写的一个测试页面，显示了这个问题：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <style type="text/css">

        table {
                border-collapse: collapse; 
                 border: 2px solid black;
        }

        td {
                border: 1px solid black;
        }

        th {
                border: 1px solid black;
        }

    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Date</th>
          <th>Type</th>
          <th>Champion</th>
          <th>Note</th>
        </tr>
      </thead>
              <tbody>
      <tr>
        <td>UI Team Meeting</td>
        <td>3/5/2013 1:00 PM</td>
        <td>User Interface</td>
        <td>John Doe</td>
        <td></td>
      </tr>
      <tr>
        <td>PM Meeting</td>
        <td>3/4/2013 10:00 AM</td>
        <td>PMs</td>
        <td>Jane Doe</td>
        <td></td>
      </tr>
              </tbody>
    </table>
  </body>
</html>

之前有其他人见过这个并找到了解决方案吗？我甚至都找不到其他人在谈论这个问题。

谢谢！

Answer 1

我在IE 9中遇到了类似的问题。页面上第一个表格的第一行边框的上半部分不会出现在页面的纸质版本上。当我加载你的代码时，我看到相同的症状。

我通过将table，th和td的边界规则组合到一个规则中解决了我们的问题。这个技巧似乎也适用于你的，但这意味着外边框的大小与内边框相同：

    table {
            border-collapse: collapse; 
    }

    table, th, td {
            border: 1px solid black;
    }

IE 10打印表格元素时缺少边框段

1 个答案: