4

そのため、IE 10 のみでテーブル要素を印刷する際に、境界線の一部が欠落したり切り取られたりする問題に対処してきました。奇妙な部分は、tbody の最初の行のみのように見え、その行の最初と最後のセルのみが影響を受けることです。

これまでに見つけたもののいくつかを次に示します。

  1. 画面上の表は問題なく表示されますが、印刷時にのみ境界線が失われます。
  2. Standards モードと Quirks モードで同じ動作が得られます。
  3. これは、border-collapse の使用、セルとテーブル要素の両方の境界線、および 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、およびの境界ルールをtd1 つのルールにまとめることで、この問題を回避しました。このトリックはあなたのものでも機能するように見えますが、外側の境界線が内側の境界線と同じサイズになることを意味します:

    table {
            border-collapse: collapse; 
    }

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