A4サイズのhtmlテーブルを取り入れる

Question

私はワイドテーブルを持つ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を。それはサイド・バイ・サイド印刷ページを配置し、それが画面に表示されているとして、テーブル全体を読み取ることがある場合は、事前

Answer 1

で

おかげでこれは、あなたがやりたいように見えます。その後、（私は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} 
    } 

キーは、印刷用コンテンツを回転している、あなたのスタイルシートにこれを追加し、あなたがあなたのリンクに提供されたHTMLで働いていましたサイズを横にして用紙を回転させると、左から右のポートレートのページが表示されます。残念ながら、ページを列間で分割することはできませんでした。しかし、印刷されたすべてのページを壁に横に並べて掲載している場合は、それを読むことができます。印刷プレビューには、90度回転したすべてのページが表示されます。印刷ダイアログで用紙サイズとしてA4を選択します。 最初のページの左側にぶら下がっていたため、テーブルと見出しの位置を変えなければなりませんでした。おそらくインラインスタイルのネストされたすべてのdivのためでしょうか？ 。 pdfファイル（私はこの例では、あなたの最初の行のカップル回以上繰り返し）https://www.dropbox.com/s/fjyns5gaa4jiky4/wide-table%20printed.pdf?dl=0

Answer 2

表は、あなたが行うことができ、すべてがテーブルの幅を作ることです、新しい行にその列を破ることができなかったとして、ここでは

が印刷されます紙幅に合わせて調整する。

A4ページ幅は2480ピクセル×3508ピクセルです。

それは、用紙のサイズを超えないことができるようにあなたが2480pxに、テーブルの最大幅を行います。

あなたのテーブルid = "table"を推測してみましょう。

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

Answer 3

印刷可能なシートを取得するには、テーブルではなく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; 
} 

。

フィドル：あなたがテーブルを有し、かつ使用している場合

printing-html-table

CSS2PDF