0

CSS を使用してテーブルの内容のサイズを変更し、印刷時に内容がすべて表示されるようにする方法を探していますが、個々のセルのテキストが折り返されないようにします。この例では、

<table class="datatables" id="table1">
<tr>
<td style="white-space:nowrap;">This is a table with a bunch of data that stretches off the page when printed.</td>
<td style="white-space:nowrap;">I want it to print on one line, not wrap but also be sized small enough to fit on a printed page.</td>
<td style="white-space:nowrap;">It currently cuts off most of this last column.</td>
</tr>
</table>

最後の td は印刷時にほとんど切り取られますが、これらはすべて意図したとおりに 1 行で表示されます。例として、スタイルをインラインに配置しましたが、スタイル シートを使用します。私の理想的な解決策は、折り返しなしで行ごとに 1 行に収まるようにフォントのサイズを自動的に変更することです。任意の考えをいただければ幸いです。

4

4 に答える 4

1

印刷の出力を制御することは、ほとんど不可能な作業です。ユーザーが使用しているプリンターの変数、使用可能なフォント、設定されている設定などはわかりません。

私は以前にこの問題を抱えていましたが、ユーザーにとって最もクリーンな解決策は、テーブルを .pdf に変換することでした。これにより、マシンとプリンター間でほぼ同じようにレンダリングされます。技術的な観点からはそれほど簡単ではないように思えるかもしれませんが、非常に簡単な解決策があります: データテーブルです。

「テーブル ツール」プラグインを使用すると、数行のコードといくつかの追加ファイルを追加するだけで、任意のテーブルの .pdf 形式のバージョンを作成できます。これが動作するデモ です 一言で言えば、テーブルが正しくフォーマットされていて、非常に大きくない場合 (必ず<thead>タグを使用してください)、必要なファイルをアップロードし、セレクターを変更してデモコードを適用して、表、.pdf の作成を容易にする swf ファイルを参照すると、スムーズに動作するはずです。セットアップで見たほとんどの問題は、swf パスへの誤った参照に関係しています。

出来上がり、印刷可能なシンプルなコード。

于 2013-10-22T17:06:06.713 に答える
1

多分あなたはで試すことができます

@media print
 {
   table.datatables {font-size:10px} /*Type the value that you want*/
 }
于 2013-10-22T16:05:52.627 に答える
0

これは完全な解決策ではありません。どの値が適切かを確認する必要があります。

CSS 変換スケール プロパティを使用します。

私の場合、テーブルの幅がより大きかったため、javascript を使用してこれを行いました。横幅が大きすぎたので、縮小して余白を調整し、javascriptwindow.print()で元に戻しました。

document.getElementById('your table id').style.transform = ("scale(0.8)");
document.getElementById('your table id').style.margin = ("0 0 0 -15%");

CSS で同じプロパティを使用して行うこともできます。

#table {
  transform: scale(0.8); //Adjust this accrding to your need by printing
  margin : 0 0 0 -15%; //Adjust this accrding to your need by printing
}
于 2020-04-16T12:40:44.423 に答える