php htmlを印刷

印刷に挑戦
１．cssに記載
@charset "utf-8";
/* CSS Document */
.print_pages{
/*A4縦*/
width: 172mm;
height: 251mm;
page-break-after: always;
position: relative;
counter-increment: page_count;
/*
print_pagesのpositionをrelative
A4縦172mmx251mm
A4横251mmxheight172mm
*/
}
/*最後のページは改ページを入れない*/
.print_pages:last-child{
page-break-after: auto;
}
.PrintButton{
display : none;
}

２．linkの組み込み
 <link media="print" rel="stylesheet" href="print.css">
media="print"で装置がプリンターの時のみ有効


3.印刷の組み込み

<input type=button name=print value="印刷"  class="PrintButton" onClick="javascript:window.print()">
または
<input type="button" value="印刷" class="PrintButton" onclick="window.print();" />
<article>
<section class="print_pages">
  ページ
</section> 
<section class="print_pages">
  ページ
</section> 
<section class="print_pages">
  ページ
</section> 
</article>

3.印刷画面が起動される
class="PrintButton" はこのボタンが印刷されない

４．ヘッダーとフッター
.print_pages:before{
position: absolute;
right: 0;
top: 0;
content: "テスト文字";
}
.print_pages:after{
position: absolute;
right: 0;
bottom: 0;
content: counter(page_count) "ページ";
}

５．ハードコピーでいいなら
CSSの読み込みもなしsection もなしで印刷プレビュー画面が起動する

Bootstrap 伝票明細の入力　その5

方法としては
・グリッドの利用
・formグループの利用
・テーブルの利用
を検討した

テーブルでうまく行きそうだが
<table class="table table-striped table-bordered table-hover">
<form>
 <thead>
  <tr  class ="table-primary">
   <th style="width: 8%">cd</th>
   <th style="width: 8%">*</th>
   <th style="width: 24%">na</th>
   <th style="width: 8%">su</th>
   <th style="width: 8%">tan</th>
   <th style="width: 8%">kin</th>
   <th style="width: 8%">zkbn</th>
   <th style="width: 4%">so</th>
   <th style="width: 4%">t1</th>
   <th style="width: 4%">t2</th>
   <th style="width: 4%">t3</th>
   <th style="width: 12%">biko</th>   
  </tr>
 </thead> 
で見出しは配分してくれるが
<tr>
  <td ><input type="text" name="cd"   value ="cd"></td>
で画面が右に広がる　
<tr>
  <td ><input type="text" name="cd"   size="10" value ="cd"></td>
とサイズをいれても同じ
基本色々とテストしがたテーブルではできないようである

・次に王道として　form-inline　form-group　form-control
の利用だが右端からきっちりと表示してくれる
<form class="form-inline">
 <div class="form-group">
  <input type="text" name="cd"  class="form-control" size ="10" value ="cd">
 </div>
 <div class="form-group"> 
        <input type="submit" name ="serch" value ="表示"  class="form-control btn btn-primary  btn-sm">  
 </div>
 <div class="form-group">
  <input type="text" name="na" class="form-control"  size ="30" value ="na">
 </div>
 <div class="form-group"> 
  <input type="submit" name ="serch" value ="一覧"  class="form-control btn btn-primary  btn-sm"> 
 </div>
 <div class="form-group">
  <input type="text" name="bsu" class="form-control"  size ="10" value ="iri">
 </div>

・次に
<div class="container">
   <div class ="row bg-info text-white">
のである

１２列内に列の追加が可能で使いやすいのでこれを使う事に


ソースは次のブログで

Bootstrap テーブルの利用　その４

・サンプル
<table class="table table-striped table-bordered table-hover">
　罫線有り、一行おき色つき、選択行をハイに


・サンプル見出しの色とセル幅の指定 ％指定が便利

Bootstrap ボタンの利用　その３
・サンプル

Bootstrap グリッドシステムの利用　その２
・サンプル
<div class="container">