web-dev-qa-db-ja.com

A4サイズのHTMLテーブルを合わせる

幅の広いテーブルを含むhtmlファイルがあります。 A4サイズにしたいです。 A4サイズを超える列は、新しいテーブルで下に来るはずです。

@page属性を使用してみましたが、何も変わりませんでした。

<style type="text/css">
    @page {    size: 21cm 29.7cm; margin: 30mm 45mm 30mm 45mm; }
</style>

これを自動的に行うサードパーティのjsライブラリはありますか？ （テーブルのサイズは事前に知られていないため、ユーザーはデータをアップロードしてテーブルを生成するため、列の数は固定されません）。 {私の最終目標は、これをPDFとして印刷することですが、QTで提供されているqprinterを使用してこれを達成できませんでした}

ここに長いテーブルを持つhtmlファイルを配置しました- link 。

前もって感謝します

htmlcsspdf
12
clearScreen

テーブルは新しい行の列を分割できませんでした。できることは、紙の幅に応じてテーブルの幅を作ることだけです。

A4ページ幅（px）は2480ピクセルx 3508ピクセルです。

したがって、テーブルの最大幅を2480ピクセルにして、用紙のサイズを超えないようにします。

あなたのテーブルid = "table"を推測しましょう、そしてあなたのスタイルはそうあるべきです。

<style>
  #table{
    max-width: 2480px;
    width:100%;
  }
  #table td{
    width: auto;
    overflow: hidden;
    Word-wrap: break-Word;
  }
</style>
4
Fawad Ali

これは、印刷されたページを並べて配置し、画面上にあるとおりにテーブル全体を読み取る場合に、必要な処理を実行するように見えます。リンクで提供したhtmlで機能し、これをスタイルシートに追加しました（Chromeでのみテストしました）

  @media print{  
   @page {size:landscape;}
   html{
    -ms-transform: rotate(90deg);/* IE 9 */
    -webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */
    transform: rotate(90deg);
   }

   table,h1,h2 {position:relative;left:4.5cm}
  }

キーは印刷用にコンテンツを回転させて次のページに「下」にオーバーフローし、サイズを横に設定して用紙を回転させることで、左から右に縦向きのページになります。残念ながら、列間でページを分割できませんでした。しかし、印刷されたすべてのページを壁に並べて投稿すると、読みやすくなります。印刷プレビューには、すべてのページが90度回転した状態が表示されます。これが目的です。印刷ダイアログで用紙サイズとしてA4を選択します。テーブルと見出しを最初のページの左側にぶら下がっているため、おそらくインラインスタイルのネストされたすべてのdivが原因で、テーブルと見出しの位置を変更しなければなりませんでしたか？.

これはpdfファイルとして印刷されています（この例では最初の行をさらに数回繰り返しました） https://www.dropbox.com/s/fjyns5gaa4jiky4/wide-table%20printed.pdf?dl=

2
Arleigh Hix

適切な印刷可能なシートを取得する場合は、テーブルではなくdivを使用してください。 <div>を使用すると、表示方法をより適切に制御できます。 <div>は、<table>、<tr>、<td>などとは異なり、簡単にスタイル設定できます。

ここに私がやったことがあります：

CSS

@media print {
    @page {
      margin: 0;
    }
    body {
        height: 100%;
        width: 100%;
    }
    div.divTableRow > div {
      display: inline-block;  
      border: solid 1px #ccc;
      margin: 0.1cm;
      font-size: 1rem;
    }
    div.divTableRow {
      display: block;
      margin: solid 2px black;
      margin: 0.2cm 1cm;
      font-size: 0;
      white-space: nowrap;
    }
    .divTable {
        transform: translate(8.5in, -100%) rotate(90deg);
        transform-Origin: bottom left;
        display: block;
    }
}


.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
  width:100px; // set to a fixed value so as to get the table in the ordered manner.
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}

.divTableBody {
  display: table-row-group;
}

必要に応じて同じものをカスタマイズできます。

フィドル： div-table-printable

table-to-divs を使用して、<table>でhtmlを<div>に変換できます。

その他の参照：

printing-html-table

CSS2PDF

2
Ani Menon