web-dev-qa-db-ja.com

最後のページのみのPRINTのスティッキーフッターを修正しました

私が持っているのは<table>bigまたはsmallの場合もあり、1ページにのみ表示されます。 10ページ程度になることもあります。

サンプルコードは次のとおりです。

div{
  position:relative;
  height:100vh;
}

.table-blue{
  width:100%;
  background:lightblue;
}

.table-blue td{
  padding:5px 10px;
}

.table-blue-fotter{
    position: absolute;
    bottom: 20px;/* for bottom gap */
    left: 0px;
    width:100%;
    background:gray;
}


@media print {
 .table-blue-fotter{
    position: fixed;
    bottom: 20px;
    left:0px;
    width:100%;
    background:gray;
}
<div>
<table class="table-blue">
  <tr>
    <td>one</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>two</td>
    <td>two test</td>
  </tr>
  <tr>
    <td>three</td>
    <td>three test</td>
  </tr>
</table>

<table class="table-blue-fotter">
  <tr>
    <td>one</td>
    <td>one test</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>two</td>
    <td>two test</td>
    <td>one test</td>
  </tr>
  <tr>
    <td>three</td>
    <td>three test</td>
    <td>one test</td>
  </tr>
</table>

</div>

プロパティ検査のフィドル -これは私にとってはうまくいきます。しかし、テーブルが長くなると、ストーリーは this に変わります。

2番目のビューでは、最初の<table>長くなり、印刷ビューでフッターがすべてのページに表示されます。

だから私が欲しいのは.table-blue-fotterコンテンツの高さに関係なく、ページ下部の端にある印刷ビューの最後のページにのみ表示されます。

enter image description here

最後のページのみ

CSSの修正を期待しています。

cssprintinghtml-tablestylesheet
7
weBBer

次の方法で更新します。

@media print {
  .table-blue-fotter {
    position: static; /* <-- Key line */
    bottom: 20px;
    left: 0px;
    width: 100%;
    background: gray;
  }
3
Hanif

CSSで、メディアタイプprintからposition: fixed;を削除します。これにより、すべてのページにフッターが表示されます。

チェックアウト https://jsfiddle.net/ur6d1h21/12/

0
agarwalankur85