htmlで印刷命令を出した場合テーブル内要素<th>横幅が変更出来ない

htmlで印刷命令を出した際、cssのzoomで倍率を小さくしているのですがtable内要素の中文字数が一定を超えると改行されて表示されます。
それを防ぐ為に印刷時<th>要素の横幅を広げてたいのですが上手く出来ません。
何が間違っているのかわかる方教えていただけませんか。

nyuryoku.html

<!DOCTYPE html>
<html>
<style>
@media print {
 div {
 zoom: 50%;
 }
.frm{
position:absolute; top:0px; left:0px;
}
#submit_button{
visibility: hidden;
}
th{
width=490px;
}
 }
</style>
 <head>
 <meta charset="UTF-8" />
 </head>
 <body>
		<div class="table" style='position:absolute; top:100px; left:50px;'>
		<form class="frm" action="syori.php" method="POST">
<font size="5" color="#000000">
<input type="submit" id="submit_button" value="送信"><br>
		<table border="1" rules="all" cellspacing="10" style="position:relative; left:5px">
			<tr><th width=20>NO</th><th width=90>ああああ</th><th class="tenpo" width="300">テストああああ</th><th width=180>（L）</th><th>（M）</th><th width=180>（S）</th><th width=200>テスト改行<br>入れてみた</th></tr>
			<tr><th>1</th><th><input type="hidden" name="tencode[0]" class="tencode" value="000">000</th><th><input type="hidden" name="tenname[0]" class="tenname" value="設定データ">設定データ</th><th><table><tr><th><input type='number' min='0' max='999999'  maxlength='6' name="inputl[0]" class="inputl"size="20"  autofocus></th><th>箱</th></tr></table></th><th><table><tr><th><input type='number' min='0' max='999999'name="inputm[0]" class="inputm" size="20" maxlength='6' ></th><th>箱</th></tr></table></th><th><table><tr><th><input type='number' min='0' max='999999'name="inputs[0]" class="inputs" size="20" maxlength='6'></th><th>箱</th></tr></table></th><th><table><tr><th><input type='number' min='0' max='999999'class="inputsum" size="20" readonly="false" ></th><th>箱</th></tr></table></th></tr>
			</th></tr>
		</table>
		</font>
		</form>
		</div>
 </body>
</html>

chachaomaru

2016/02/15 02:15

table内の構造と、そのcssをもう少し詳しく教えてください。

Lhankor_Mhy

2016/02/15 05:02

CSSに`width=490px;`という記述がありますが、これは写し間違えで実際のコードでは`width:490px;`となっていると考えていいですか？

aaaaaaaaaaaaaa

2016/02/15 05:18

そうです。写し間違えです。

Lhankor_Mhy

2016/02/15 06:06

質問を修正した方がいいんじゃないですか？

行動規範の内容に同意します

回答2件

ソースを整理して、私が不要と思う部分を削除してみますと、サンプルのテキスト量でしたら改行せずに表示されました。
確認したのはChromeです。
変更箇所は下記です。

th{
width=490px;
}
↓
削除

各thのwidth属性
↓
削除

閉じタグが余分に多かった</th></tr>
↓
削除

この状態をベースに、広げたいセル（th）のみに個別でclassを付けるなりして、広げてみてはいかがでしょうか。
ただ、他のセルの文字量も多いとお互い干渉しあって思うようにならないと思いますので、
zoom: 50%; の数値を大きくするか、white-space: nowrap; を適用して無理やり改行しないようにするなどを試してみてはいかがでしょうか。

下記整形したソースです。

HTML
1<!DOCTYPE html>
2<html>
3<style>
4@media print {
5	div {
6		zoom: 50%;
7	}
8
9	.frm{
10		position:absolute;
11		top:0px;
12		left:0px;
13	}
14
15	#submit_button{
16		visibility: hidden;
17	}
18
19}
20</style>
21<head>
22<meta charset="UTF-8" />
23</head>
24<body>
25<div class="table">
26	<form class="frm" action="syori.php" method="POST">
27		<font size="5" color="#000000">
28			<input type="submit" id="submit_button" value="送信"><br>
29			<table border="1" rules="all" cellspacing="10" style="position:relative; left:5px">
30				<tr>
31					<th>NO</th>
32					<th>ああああ</th>
33					<th class="tenpo">テストああああ</th>
34					<th>（L）</th>
35					<th>（M）</th>
36					<th>（S）</th>
37					<th>テスト改行<br>入れてみた</th>
38				</tr>
39				<tr>
40					<th>1</th>
41					<th><input type="hidden" name="tencode[0]" class="tencode" value="000">000</th>
42					<th><input type="hidden" name="tenname[0]" class="tenname" value="設定データ">設定データ</th>
43					<th>
44						<table>
45							<tr>
46								<th><input type='number' min='0' max='999999'  maxlength='6' name="inputl[0]" class="inputl"size="20"  autofocus></th>
47								<th>箱</th>
48							</tr>
49						</table>
50					</th>
51					<th>
52						<table>
53							<tr>
54								<th><input type='number' min='0' max='999999'name="inputm[0]" class="inputm" size="20" maxlength='6' ></th>
55								<th>箱</th>
56							</tr>
57						</table>
58					</th>
59					<th>
60						<table>
61							<tr>
62								<th><input type='number' min='0' max='999999'name="inputs[0]" class="inputs" size="20" maxlength='6'></th>
63								<th>箱</th>
64							</tr>
65						</table>
66					</th>
67					<th>
68						<table>
69							<tr>
70								<th><input type='number' min='0' max='999999'class="inputsum" size="20" readonly="false" ></th>
71								<th>箱</th>
72							</tr>
73						</table>
74					</th>
75				</tr>
76			</table>
77		</font>
78	</form>
79</div>
80</body>
81</html>