[:contents] 本記事で例として挙げさせていただいているサイトはこちら
全14社比較！2023年9月最新のロボアドバイザー・AI投資おすすめランキング | マネップ – 人生を豊かにするおすすめ金融サービスの比較サイト
印刷できない横スクロールの表
このような表は、印刷しても表示範囲外の部分は切れてしまう。
widthが設定されているため、ブラウザを縮小して表示しても意味はない。
印刷>すべて で解決できる！という記事が多いが、現在の環境には適していない。
用意するもの
- 開発者ツールが使えるブラウザ
- 主要なブラウザはほとんど対応しているはずである
- 範囲キャプチャできるソフト・拡張機能
- Windows,Macの標準機能で十分。ChromeのFileShotであれば印刷までの動線がスムーズ
手順
開発者ツールを起動する
Chromeであれば「F12」で起動する。
表全体を選択する
開発者ツールを使用し、表全体をカバーしている要素を選択する。
開発者ツールの左上の矢印を使って要素を選択すると簡単。
要素のクラス名を変更する
表のdiv要素のクラス名を変更する。
適当に文字を消したりすればOK。
クラス名を変更すると、scrollが適用されなくなり全体が表示されるようになる
キャプチャソフトで表を選択し、印刷する
開発者ツールを閉じると、表の全体が表示されるようになったことが分かる。
Tips
結局のところ、scrollを不適用にすればよいだけである。
よって、 overflowが記述されてそうな要素のstyleを見てチェックマークを外せばよい。
