HTMLのtableが印刷時プレビュー時におかしい

htmlでテーブルを書いてます。

width: 21.0cm; height: 29.7cm;のA4のテーブルで作っておき、
印刷用のCSSで、テーブルに関係ないbodyのmarginを0にすれば印刷ギリギリに見えると思ってました。
しかし、ブラウザ上は

となりますが、

印刷プレビューでは

このようになります。なぜでしょうか？

HTML, cssはこれです

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>test</title>

  <style type="text/css">
    body,div,table,thead,tbody,tfoot,tr,th,td,p { font-size:small; padding:0 }
    body { -webkit-print-color-adjust: exact; line-height: 1; }

    body, tbody {margin: 0; border:0; padding:0;}
    @page{
      size: 21.0cm 29.7cm ;
      margin: 0;
    }

    sticky_table tr, td {
      line-height: 100%;
    }

  </style>
  
</head>

<body>
<table class="sticky_table" style="table-layout:fixed; width: 21.0cm; height: 29.7cm;" cellspacing="0" border="0">
  <tbody>
    <tr style="height: 100%;">
      <td style="border: 2px solid black;">hoge</td>
    </tr>
  </tbody>
</table>

</body>

</html>

marginを外すと大きく表示はされるのですが、上下の日時やタイトルが出てしまいます。これを消したいです。

    @page{
      size: 21.0cm 29.7cm ;
      /* margin: 0; */
    }

行動規範の内容に同意します

回答1件

media printは入れてみましたか？

印刷用CSS（@media print）を確認・デバッグする方法

投稿2018/06/08 14:01

m.ts10806

総合スコア80850

shinriyo

2018/06/11 01:23

返信有難うございます。入れても同じでした。変わったのは、 style="table-layout:fixed; width: 21.0cm; height: 29.7cm;" の縦横値を小さくすると線が紙のサイズで表示されました。超えてしまったら最初のように小さく出るのですかね？

m.ts10806

2018/06/11 01:25

どのように記載したのでしょうか？質問本文に記載してください

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTMLのtableが印刷時プレビュー時におかしい

関連した質問