ウェブページ印刷細線表＋ページ印刷究極の戦略

最近、クライアントのために印刷していたとき、ページのヘッダーを印刷するのではなく、表の内容だけを印刷するように依頼されました。ヘッダーには背景と印刷ボタンがあり、細い線の表にする必要があるためです。これは非常に簡単だと思います。細い線の表の作り方がまだわからない場合は、次のコードを参照して効果を実現してください:)
<テーブルセル間隔=0 セルパディング=0 境界線=0>
<tr>
<td bgcolor='黒'>
<テーブルセル間隔=1 セルパディング=1 境界線=0>
<tr align=center bgcolor='#ffffff'>
<td colspan=2>国家レベル</td><td colspan=1>地方自治体レベル</td>
</tr>
<tr bgcolor='#ffffff' align=center>
<td>人民日報</td>
<td>リベレーション・デイリー</td>
<td>新民イブニングニュース</td>
</tr>
</テーブル>
</td>
</tr>
</テーブル>
次に、IE で背景を印刷するように設定しました。これで完了だと思いましたが、印刷してプレビューすると、ヘッダーに大きな黒いブロックが表示されました。なぜでしょう? ヘッダーに背景があり、それがページ全体を占めていたからです。
.gタイトル
{
幅:100%;
高さ:32px;
行の高さ:32px;
背景画像:url(images/gtitle.gif);
パディング左:130px;
下マージン:10px;
}
私は落ち込み始めました。長い間インターネットで検索しましたが、完璧な解決策が見つからなかったため、自分でやることにしました。
長い間考えた後、ようやく分かりました:)
CSS 定義は次のとおりです。
noneprint: 印刷時にスタイル定義を非表示にする
tabPrint: 印刷する細線表スタイルの定義
nextPate: ページネーションスタイルの定義
linetd: ハハ、これが最も重要なことだよ、フォームを完璧に印刷するには

コードをコピー

コードは次のとおりです。

@media 印刷 {
.noneprint{表示:なし;}
}
.tab印刷td
{
左境界線:#000000 実線 1px;
上境界線:#000000 実線 1px;
高さ:21px;
}
table.tab印刷
{
右境界線:#000000 実線 1px;
border-bottom:#000000 実線 1px;
}
.次のページ
{
ページ区切り後:常に;
}
.linetd
{
ボーダー下部:solid 1px #000;
}

ページの HTML は次のとおりです。
各ページにヘッダーが表示されるように、必ず style="display:table-header-group;font-weight:bold" を thead に追加してください。
<div class="noneprint">
<div class="gTitle">>><A href="../Default.aspx" mce_href="Default.aspx">ホーム</A>>><A href="Default.aspx" mce_href="Default.aspx">ポータル</A>>>情報管理</div>
<表のセル間隔="0" セルパディング="2" 幅="100%" 位置合わせ="中央" 境界線="0" ID="表1">
<tr>
タイトル：
<td><input name="txtFName" type="text" id="txtFName" style="width:150px;" /></td>
<td align="right">住所:</td>
<td><name="ddlStreet" id="ddlStreet">を選択します
<option selected="selected" value="">-ステータスを選択してください-</option>
</選択></td>
<td align="right">エントリー日:</td>
<td colSpan="3"><input name="sDate" type="text" id="sDate" onclick="setday(this)" style="width:80px;" />--
<input name="eDate" type="text" id="eDate" onclick="setday(this)" style="width:80px;" /></td>
<td><input type="submit" name="btnSearch" value="クエリ" id="btnSearch" class="ボタン" />
<input type="button" onclick="window.print()" value="印刷" class="Button" ID="Button1" NAME="Button1"></td>
</tr>
</テーブル>
</div>
<table class='tabPrint' align="center" width="95%" cellSpacing="0" cellPadding="0" border="0"
ID="表2">
<thead style="display:table-header-group;font-weight:bold" mce_style="display:table-header-group;font-weight:bold">
<tr align="center">
<td rowspan="2">ストリート</td>
<td rowspan="2">タイトル</td>
<td rowspan="2">エントリー日</td>
<td colspan="2">全国</td>
<td colspan="1">市町村レベル</td>
</tr>
<tr align="center">
<td>人民日報</td>
<td>リベレーション・デイリー</td>
<td>新民イブニングニュース</td>
</tr>
</thead><tbody>
<tr align="center">
<td>浦東新区釜山街</td>
<td>テスト</td>
<td>2009年2月24日</td>
<td>√</td>
<td>√</td>
<td>√</td>
</tr>
<tr align="center">
<td>浦東新区釜山街</td>
<td>セレフ</td>
<td>2009年2月24日</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr align="center">
<td>浦東新区釜山街</td>
<td>セレフ</td>
<td>2009年2月24日</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr align="center" class='nextPage'>
<td colspan="6" class='linetd'>ページ 1</td>
</tr>
<tr align="center">
<td>浦東新区釜山街</td>
<td>sdsedjiik</td>
<td>2009年2月24日</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr align="center">
<td>浦東新区釜山街</td>
<td>sdsedjiik</td>
<td>2009年2月24日</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr align="center">
<td>浦東新区釜山街</td>
<td>sdsedjiik</td>
<td>2009年2月24日</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr align="center">
<td>浦東新区釜山街</td>
<td>sdsedjiik</td>
<td>2009年2月24日</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr align="center">
<td>浦東新区釜山街</td>
<td>sdsedjiik</td>
<td>2009年2月24日</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody></table>
ハハ、赤くマークされた部分を注意深く見ないと、完璧かどうかは完全にそこにかかっています！

<<: MySQL でデータの重複挿入を回避する 4 つの方法

>>: 同じレベルの要素で Position:fixed と margin-top を一緒に使用する場合の CSS の問題