4

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

到目前为止，我发现了一些东西：

  1. 屏幕上的表格看起来还不错，但只有在打印时才会缺少边框。
  2. 我在标准和怪癖模式下得到相同的行为。
  3. 看起来它是使用边框折叠、单元格和表格元素上的边框以及使用 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>

那么有没有其他人以前见过这个并找到了解决方案？我什至找不到其他人谈论这个问题。

谢谢！

4

1 回答 1

8

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

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

    table {
            border-collapse: collapse; 
    }

    table, th, td {
            border: 1px solid black;
    }
于 2013-01-22T01:45:27.577 回答