コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

印刷時にコンテンツとtitle_html/css_WEB-ITnoseの間に空白が入る

WBOY
リリース： 2016-06-24 12:24:35
オリジナル
1457 人が閲覧しました

html 

<HTML>    <HEAD>     <TITLE> AJava.org书城订单明细</TITLE>     <style>     @media print{      .toolbar{display:none;}      }      .toolbar{border:1px solid #6A9BFA;background:#E8F7E8;}      .paging{page-break-after :always}      td{font-size:12px;color:#000000;}      </style>    </HEAD>       <BODY>    <div class='toolbar'>    <OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0>    </OBJECT>    <input type=button value=打印 onclick=document.all.WebBrowser.ExecWB(6,1)>    <input type=button value=直接打印 onclick=document.all.WebBrowser.ExecWB(6,6)>    <input type=button value=页面设置 onclick=document.all.WebBrowser.ExecWB(8,1)>    <input type=button value=打印预览 onclick=document.all.WebBrowser.ExecWB(7,1)>    </div>    <TABLE width="100%" border="0"><THEAD style="display:table-header-group;font-weight:bold">  <TR>         <TD>书名</TD>         <TD>价格</TD>         <TD>送货地址</TD>         <TD>送货时间</TD>         <TD>状态</TD>       </TR>   </THEAD>    <tr><td><table>   <TR>       <TD>《Java 编程思想》</TD>       <TD>￥60.00</TD>       <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>       <TD>2009-8-8</TD>       <TD>已送达</TD>      </TR>      <TR>        <TD>《Java 编程思想》</TD>        <TD>￥60.00</TD>        <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>        <TD>2009-8-8</TD>        <TD>已送达</TD>      </TR>      <TR>        <TD>《Java 编程思想》</TD>        <TD>￥60.00</TD>        <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>        <TD>2009-8-8</TD>        <TD>已送达</TD>      </TR>      <TR>        <TD>《Java 编程思想》</TD>        <TD>￥60.00</TD>        <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>        <TD>2009-8-8</TD>        <TD>已送达</TD>      </TR>      <TR class='paging'>        <TD>《Java 编程思想》</TD>        <TD>￥60.00</TD>        <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>        <TD>2009-8-8</TD>        <TD>已送达</TD>      </TR>      <TR >        <TD>《Java 编程思想》</TD>        <TD>￥60.00</TD>        <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>        <TD>2009-8-8</TD>        <TD>已送达</TD>      </TR>      <TR>        <TD>《Java 编程思想》</TD>        <TD>￥60.00</TD>        <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>        <TD>2009-8-8</TD>        <TD>已送达</TD>      </TR>      <TR>        <TD>《Java 编程思想》</TD>        <TD>￥60.00</TD>        <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>        <TD>2009-8-8</TD>        <TD>已送达</TD>      </TR>      <TR>        <TD>《Java 编程思想》</TD>        <TD>￥60.00</TD>        <TD>伊拉克巴格达总统府9栋8单元7门654室</TD>        <TD>2009-8-8</TD>        <TD>已送达</TD>      </TR>      <TR>        <TD>《Java 编程思想》</TD>        <TD>￥60.00</TD>        <TD><B>伊拉克巴格达总统府9栋8单元7门654室</B></TD>        <TD>2009-8-8</TD>        <TD>已送达</TD>      </TR>     </td></table></tr>  <TFOOT style="display:table-footer-group;font-weight:bold">   <TR>   <TD colspan="5"  align="left" >以上内容纯属虚构</TD>   </TR>   </TFOOT>   </TABLE>   </BODY>   </HTML>
ログイン後にコピー

教えてください、このようにページネーション ラベルを配置すると、印刷プレビューで空白のブロックが生成されます。これはなぜですか? , テーブルコンテンツであり、
TABLE が設定されていない場合は、通常の表示になります。しかし、上記のプログラムと同様の操作が必要です。どうすればこの問題を解決できますか?ありがとうございます

ディスカッションへの返信（解決策）

具体的な部分がわかりません

プログラムをコピーして実行するとわかります。テストにはIE8.0を使用しています。
印刷すると、最初のページのタイトルとコンテンツの間に大きな空白が生じます。 tr に page-break-before タグが配置されていることが原因であることはわかっていますが、解決方法がわかりません。

つまり、 .paging{page-break-after :always} を削除するだけで十分ということですか?なぜ削除しないのでしょうか？

ああ、ページングに次ぐページングは​​理解しました。

page-break-after 属性を確認すると、次のことがわかりました:

「注: 改ページ属性の使用はできる限り少なくし、テーブル、フローティング要素、境界線のあるブロック要素では改ページ属性の使用を避けてください。」

デバッグ後、HTML コードに問題があります

内



ここに余分な行があります。 ＜テーブル＞」を外しても大丈夫です。コードはきちんとしている必要があります~

デバッグ後、HTML コードに問題があります

関連ラベル：
打印时，内容与标题有一块空白内容
ソース：php.cn
前の記事：div1 div2 div2 を div1_html/css_WEB-ITnose の右下隅に配置する方法 次の記事：質問したいのですが、textarea の overflow:visible 属性を FF_html/css_WEB-ITnose で置き換えることはできますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
すべてを試しましたが、HTML コンテンツが表示されません 基本的に、HTML ドキュメントの内容はブラウザーには何も表示されません。私が作成したこの HTML ドキュメントは、別の HTML ファイルからリンクされています。この HTML...
から 2024-04-04 19:16:15
0
1
3496
Leaflet のマーカーに 2 つのポップアップを持たせるにはどうすればよいですか? 1 つはマウスオーバーで、もう 1 つはクリックでしょうか? タイトルを地図上のマーカーの上に置き、クリックすると、さまざまなコンテンツを含む完全なポップアップが開きます。対応するポップアップへのリンクとして使用されるすべてのマーカーのリスト...
から 2024-04-01 12:40:41
0
1
310
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート


ここに余分な行があります " < ;tr>

」を削除すれば大丈夫です。コードはきちんとしている必要があります〜

これは特に問題ではありません。TABLE-A の TD に TABLE-B を配置し、TABLE-B にページ変更ラベルを配置します。 A 問題ありません。しかし、それは私が望んでいる効果ではありません、ありがとう!

つまり、 .paging{page-break-after :always} を削除するだけで十分ということですか?なぜ削除しないのでしょうか？

兄弟、ページ変更を強制するために pege-break-after が配置されています。実際、私のテスト プログラムは単純化されています。テーブルには多くのコンテンツが含まれています。行数が多い場合は、ページを強制的に変更する必要があり、各ページにテーブル ヘッダーが必要です。

なぜ最初のテーブルに別のテーブルをネストする必要があるのか​​よくわかりません。これを 3 つのテーブルを作成し、1 つのテーブルに head を、1 つのテーブルに foot を、中央にページネーションのコンテンツを配置します。テーブルでは、3 つの並列テーブルでもこの​​空白の問題を回避できます。

なぜ最初のテーブルに別のテーブルをネストする必要があるのか​​よくわかりません。これを 3 つのテーブルを作成し、1 つのテーブルに head を、1 つのテーブルに foot を、中央にページネーションのコンテンツを配置します。テーブルでは、3 つの並列テーブルでもこの​​空白の問題を回避できます。 我 、は次のようになります。

Table A

TR

Table B
タイトルを配置します
/TABLE
/TR
Tr
& LT; で配布されています。ページングタグもここに配置されます
タイトルとのギャップが大きいほど内容、つまり、表 B と表 C の間のギャップが大きくなるほど、非常に奇妙な効果が生じます...!

ページが 2 つしかないと仮定して、最初は空白の距離 = 次のページの行数を判断します value2

page2
TITLE1 TITLE2
value1 value2
value1 value2