CSSで、テーブル印刷時に複数ページにまたがって印刷しても見出し部分を全てのページに印刷させる

今回はCSSのお話です。

最近は帳票をHTML形式で出力させることが多いのですが(わざわざPDFなどにしなくても、十分使える帳票印刷ができますよね)、
その際にテーブルをループで回して表示していると、1ページに収まらなくなることがあります。

そんなときに便利なのが、CSSのdisplayプロパティ!
値にtable-header-groupとしてやると、印刷時にテーブルが複数ページにまたがったとしても、見出し部分を全てのページのトップに出してくれます。
これ、地味に使いまくりです。見出し部分をthead要素で囲んでやらないとダメですが、それとCSS指定するだけです。

でも、この指定をしてもChromeだけ見出しが印刷されないんですよね。
最新のバージョン 33.0.1750.146 mにしているんですが・・・

なんとかならないもんですかね、これ・・・

Twitter Bootstrapがバージョンアップしていた

bootstrap3

 

知らない間にブートストラップがバージョンアップして3RC1になっていました。(アドレスも変わってますね。)

最近の流行りにのって(?)、フラットデザイン+モバイルファースト+レスポンシブになっていますね。
(レスポンシブは前からですけど・・・)

続きを読む →

例えば「Handsontable」でWEB見積・請求書システムを作る場合・・・

handsontable2

たいそうな見出しをつけましたが、ようは上の画像のように、EXCELっぽいインターフェースなんだから、見積書なんぞに使えるんでねぇの?ということです。
Handsontableについては、前回の記事を参考にしてください。

続きを読む →

WEB上で表(table)をExcelっぽく使えるjQueryプラグイン「Handsontable」

handsontable2

WEBアプリケーションを作っていると、インターフェースはWEBアプリがいいんだけど、操作性はEXCELなんかの方が使いやすい!ってよくありますよね。

たとえば、フォームで格子状に「input type=”text”」を配置しても、すぐ下のテキストボックスに移動したいのに、タブキーだと何回も押さなければならなかったり、下矢印キーでは移動できなかったり・・・

そんな時に使えるのが「Handsontable」です。
紹介されているサイトはいくつかあったのですが、使い方が説明されているサイトが見当たらなかったので苦労しました・・・
なので、簡単な使い方をメモ代わりに書いておきたいと思います。

続きを読む →

Twitter Bootstrapで利用できるアイコン+追加Webフォントアイコン

tbplus

Twitter Bootstrapを利用することが多いのは、タグでもお分かりかと思いますが、よく使えば使うほど、いくつか不満も出てくるわけで・・・

続きを読む →

IEの不可思議な現象

Twitter Bootstrap(TB)を使ってサイトの構築をよくするのは、過去の記事でも書いていたのですが、
そんな中、IEのみでおこる不思議な現象をご紹介。

PHP+MySQL+TBでとある管理画面を構築中のこと・・・

本来はWindows上でhttpdを立ち上げて動作させる予定だったのですが、サーバーが間に合わなかったのでレンタルサーバー上で構築して動作確認をしていました。

続きを読む →

Twitter Bootstrapでデザイン構築

僕はデザイナーではありません。デザイン制作に向いているとも思えません。

ですが、Webサイトを制作する場合は、必ずデザインが必要になります。

正式な案件として受ける場合は、デザインは別の人に頼むことがほとんどなのですが、デザインをまったく問わない案件(Webアプリや管理ツール)などはほぼ何も考えずに制作していきます。その場合、デザインに納得がいかないことが多く、後日見てみると作り直したくなる衝動に駆られます。

そんな時に出会ったのがTwitter Bootstrapです。

続きを読む →