javascriptのjquery.jPrintArea.jsを使ってﾎﾞﾀﾝをおした時画面の表示させたﾃｰﾌﾞﾙの指定箇所の部分のみ印刷を行いたいと考えております｡配列からﾃﾞｰﾀを読み取り表…

javascriptのjquery.jPrintArea.jsを使ってﾎﾞﾀﾝをおした時画面の表示させたﾃｰﾌﾞﾙの指定箇所の部分のみ印刷を行いたいと考えております｡
配列からﾃﾞｰﾀを読み取り表(ﾃｰﾌﾞﾙ)にしています｡
jquery.jPrintArea.jsを使うことで
<div id="printarea">で囲んだ部分のみの印刷に成功しました｡

しかし､表のｾﾙ幅を固定(指定)しているしているにもかかわらず印刷するとなぜか幅が微妙にずれてしまいます｡なぜなのでしょうか？ｾﾙ幅をA41枚に収まるように狭くしても同じです｡また印刷するとﾍｯﾀﾞｰにURL､ﾌｯﾀﾞｰに日付が印刷されてしまいます｡これを消す方法はありますか？

こちらにｺｰﾄﾞを書きました｡
https://jsfiddle.net/kajironpu/a7b6v0co/

それぞれのｾﾙの幅を足した合計が全体の幅を超えているために､TABLE ﾀｸﾞの自動調整が効いているのだと思います｡

縦を合わせるのに一番単純な方法は､一行毎に TABLE を作るのではなく､全体をひとつの TABLE にすることです｡
また､ｾﾙの幅や背景色など､見栄え的なものはﾀｸﾞの属性に直接埋め込むのではなく､CSS に切り出しておくと､｢見た目を調整したかっただけなのにﾃｰﾌﾞﾙ全体が表示されなくなった｣的な地雷を回避できる可能性が高くなります｡

以上をふまえて､

ひとつの TABLE ﾀｸﾞで構成する
見出し(｢ﾘｽﾄ｣)は､TABLE の CAPTION ﾀｸﾞを使う
見出し行は TH ﾀｸﾞを使う
列の幅は COL ﾀｸﾞを使う
見栄え的なものは､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/