人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptのjquery.jPrintArea.jsを使ってボタンをおした時画面の表示させたテーブルの指定箇所の部分のみ印刷を行いたいと考えております。
配列からデータを読み取り表(テーブル)にしています。
jquery.jPrintArea.jsを使うことで
<div id="printarea">で囲んだ部分のみの印刷に成功しました。

しかし、表のセル幅を固定(指定)しているしているにもかかわらず印刷するとなぜか幅が微妙にずれてしまいます。なぜなのでしょうか?セル幅をA41枚に収まるように狭くしても同じです。また印刷するとヘッダーにURL、フッダーに日付が印刷されてしまいます。これを消す方法はありますか?

こちらにコードを書きました。
https://jsfiddle.net/kajironpu/a7b6v0co/


1478236176
●拡大する

●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

それぞれのセルの幅を足した合計が全体の幅を超えているために、TABLE タグの自動調整が効いているのだと思います。

縦を合わせるのに一番単純な方法は、一行毎に TABLE を作るのではなく、全体をひとつの TABLE にすることです。
また、セルの幅や背景色など、見栄え的なものはタグの属性に直接埋め込むのではなく、CSS に切り出しておくと、「見た目を調整したかっただけなのにテーブル全体が表示されなくなった」的な地雷を回避できる可能性が高くなります。

以上をふまえて、

というふうにしてみました。

javascript

var Array1 = ["apple","car","dog","international scppl"];
var Array2 = ["りんご","車","犬","国際学校"];

/* ★ここから */
var str1 =
 '<caption>リスト</caption>' +
 '<colgroup>' +
 '<col class="col_1">' +
 '<col class="col_no">' +
 '<col class="col_eng">' +
 '<col class="col_jpn">' +
 '<col class="col_prac">' +
 '<col class="col_prac">' +
 '<col class="col_prac">' +
 '</colgroup>' +
 '<tr>' + 
 '<th></th>' + 
 '<th>'+'No.'+'</th>' +
 '<th>'+'英語'+'</th>' +
 '<th>'+'日本語'+'</th>' +
 '<th>練習?</th>' +
 '<th>練習?</th>' +
 '<th>練習?</th>' +
 '</tr>';

var str2 = ''
for (var i=0 ; i<Array1.length ; i++) {
 str2 +=
 '<tr>' +
 '<TD>' +
 '<TD>'+[i+1]+'</td>' +
 '<TD>'+Array1[i]+'</td>' +
 '<TD>'+Array2[i]+'</td>' +
 '<TD></td>' +
 '<TD></td>' +
 '<TD></td>' +
 '</tr>';
}

var div = document.getElementById("list")
div.innerHTML =
 '<TABLE class="list" border=1 cellpadding=8 cellspacing=0 >' +
 str1 +
 str2 +
 '</TABLE>';
 /* ↑ひとつの TABLE にする */

/* ★ここまでを変更してます */

/////指定範囲印刷するjquery <div id="printarea">で囲んだ箇所が印刷される

jQuery.noConflict();
var j$ = jQuery;
jQuery(document).ready(function($){
 $('#btn_print').click(function(){
 $.jPrintArea("#printarea");
 });
});
/////////////////////////

CSS

table.list caption {
 margin-left: auto;
 margin-right: auto;
 width: 8ex;
 padding: 9px;
 background-color: #ffff66;
 border: 1px solid gray;
}
table.list th {
 background-color: #ffff66;
}
table.list td {
 background-color: #ffffff;
}
table.list {
 text-align: center;
 font-size: large;
}
table.list .col_1 {
 width: 10px;
}
table.list .col_no {
 width: 40px;
}
table.list .col_eng {
 width: 150px;
}
table.list .col_jpn {
 width: 200px;
}
table.list .col_prac {
 width: 150px;
}


jsFiddle で試したのがこちら。
https://jsfiddle.net/a_kuma3/c2k2jdka/


a-kuma3さんのコメント
>> また印刷するとヘッダーにURL、フッダーに日付が印刷されてしまいます。これを消す方法はありますか? << こっちを忘れてた。 印刷時のヘッダーやフッターは、javascript の範囲では変更できません。 ブラウザの「ページ設定」のような機能で消すか、プログラムで用意するならブラウザのプラグインのようなものを作ることになります。

kajironpuさんのコメント
ありがとうございます。返信遅れて申し訳ありません。なるほど、tableの作り方は要素ごとに書くと見やすいです。テーブルのセルの文字サイズを列ごとに個別に設定したいのですが、セルの中の文字のサイズは table.list { text-align: center; font-size: large; } こちらのlargeで一括して決められているのでしょうか。 だとすると、 セルごとに文字サイズを変えたいときは、font-size: large;の部分を消して例えば ||< table.list .col_eng { width: 150px; font-size: 15pt; } ||> というふうに個別に設定するやり方で合っていますでしょうか。 あとセルの練習?,?,?のタイトルの入った列のセル幅をもう少し広げてみたのですが、画面上では広く表示されているのですが、印刷するとなぜか、狭いままでした。もしかして、画面の表示幅を超えたので、印刷すると自動で調整されてしまうのでしょうか? これらの対策として、table.list .col_eng とtable.list .col_jpn の文字サイズをそれぞれもう少し小さく調整したいと思った次第です。 宜しくお願いします。

a-kuma3さんのコメント
>> テーブルのセルの文字サイズを列ごとに個別に設定したいのですが、 ... セルごとに文字サイズを変えたいときは、font-size: large;の部分を消して例えば << そうです。 CSS は、緩い指定よりも細かい指定が優先されて採用されるので、table.list の方の指定はそのまま残しておいても、.col_XXX の方に指定すれば、そちらが有効になります。 >|css| table.list { /* TABLE のフォントサイズは、基本的に large */ font-size: large; } table.list .col_eng { /* でも、.col_eng の列だけは small に指定 */ font-size: small; } ||< >> 画面上では広く表示されているのですが、印刷するとなぜか、狭いままでした。 << 環境(ブラウザ、プリンタ、用紙サイズ)によると思いますが、A4縦置きで印刷のプレビューを見ると、用紙の横幅に収まっていなくて自動調整が効いている感じです。 TABLE のサイズを絶対値で指定すると、用紙をはみ出る部分は見切れて表示されるので、確認できると思います。 >|css| table.list { /* TABLE 全体の幅を(例えば)900px に固定 */ width: 900px; } ||<

kajironpuさんのコメント
a-kuma3さん、ありがとうございます。 いろいろ試しているのですが、フォントサイズが小さくなりません。 https://jsfiddle.net/a_kuma3/c2k2jdka/ ↑前回作って頂いたこちらのコードを使って試しています。 table.list { text-align: center; font-size: large; } table.listは largeサイズのままで col_engの列の文字サイズだけを小さくしたいのですが table.list .col_eng { width: 150px; font-size: small; } smallの部分をfont-size:12px とか、50%とかいろいろ 試しているのですが、変化しません。 table.list のほうを試しに削除してみても同じでした。 原因がわかりますでしょうか?

a-kuma3さんのコメント
すみません、嘘を書きました (´・ω・`) COL って、指定できる属性が限られてるみたいだし、そのほとんどが非推奨で。 [https://developer.mozilla.org/ja/docs/Web/HTML/Element/col:title=&lt;col&gt; - HTML | MDN] CSS の nth-child を使ってください。 >|css| table.list tr td:nth-child(3) { font-size: small; } ||< ↑は、「TR の配下で、3番目にある TD 要素」になります。

kajironpuさんのコメント
a-kuma3 さん ありがとうございます。文字サイズ変更できました! いろいろ試してうまくいかず、教えてもらって大変助かりました。 これを基に、CSSのほうを勉強を進めています。ありがとうございました。

kajironpuさんのコメント
もう1つ教えてください。 文字置換のやり方なのですが、 *************************** var ken ="in my opinion" var str ="In my opinion, I love KEN." //文字を置換する str=str.replace(/ken/ig,"私の意見では"); document.write(str); *************************** In my opinion, I love KEN. という文章の中の In my opinionという部分を”私の意見では”に置き換えたいのですが ************************************************ //文字を置換する str=str.replace(/ken/ig,"私の意見では"); ************************************************ ↑の文字置換の/ken/ という部分に配列を指定するにはどうしたらいいのでしょうか? このままだと、文章の中のKENという部分が置換されてしまいます。 結果→In my opinion, I love 私の意見では.

a-kuma3さんのコメント
>> ↑の文字置換の/ken/ という部分に配列を指定するにはどうしたらいいのでしょうか? << 「配列」ではなくて「変数」ですね。 RegExp オブジェクトを使います。 >|javascript| var ken ="in my opinion" var str ="In my opinion, I love KEN." //文字を置換する str=str.replace(new RegExp(ken, "ig"),"私の意見では"); ||< →[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp:title] 以下の三つは、同じ正規表現のオブジェクトを表します。 >|| /in my opinion/ig new RegExp("in my opinion", "ig") var ken = "in my opinion"; new RegExp(ken, "ig") ||<

kajironpuさんのコメント
すみません、変数でした。早速有り難うございます。RegExp オブジェクトというのがあるのですね。 いろいろ自分で調べていても、変数(配列)の場合の具体的な例がなかなか見つけられず行き詰まっておりました。 その使い方の例ととても分かりやすい解説ありがとうございます。これを配列に応用して試しております。どうもありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ