###前提・実現したいこと
INPUT 要素に入力された値をそのまま印刷したいと考えています。
表示整形ための印刷用 CSS として、下画像のラベル「値1」「値2」「値3」や「PRINT」ボタン、INPUT 要素の border
を無効化するような定義を行いました。
上記の定義は問題なく適用されるのですが INPUT 要素の横幅はそのままになってしまっているため、印刷プレビューでは数式が間延びしているように見え、あまり見やすくありません。
可能であれば JavaScript を使わず CSS の定義だけで「1 +2 =3 」のような状態を「1+2=3」のように詰めて表示できればと考えています。
※ 1+2=3 の数式は 1000+2000=3000 や 10000000+20000000=30000000 など可変となります
###コード
html
1<table> 2 <tr> 3 <th>値1</th> 4 <td><input type="text" id="value1" value="1" /></td> 5 <td>+</td> 6 <th>値2</th> 7 <td><input type="text" id="value2" value="2" /></td> 8 <td>=</td> 9 <th>値3</th> 10 <td><input type="text" id="value3" value="3" /></td> 11 </tr> 12</table> 13<button id="print" onclick="window.print(); return false;">PRINT</button>
css
1 2TH { 3 display: none; 4} 5BUTTON { 6 display: none; 7}
###試したこと
INPUT 要素に値が入力された場合、あるいは「PRINT」ボタン押下時に JavaScript からの DOM 操作を実施することによって「印刷用のHTML」を都度作成し、それを印刷用 CSS で表示切り替えし印刷プレビューとして反映させるなど JavaScript を利用することで実現が可能なことは把握しております。
ただし INPUT 要素にかかる CSS 定義のみを変更することで「1+2=3」のように詰めることが可能なのであれば、後々のメンテナンスの都合上、そのように実装したいと考えています。
###補足情報(言語/FW/ツール等のバージョンなど)
CSS3
HTML5
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/29 12:04