hiroshi akutsuの日記

主にプログラミング関係のこと

css【Internet Explorer10でcssで設定したborderが印刷プレビューで表示されない不具合】

以下のhtml（本当はもっと複雑なことをしようとしたんだけど、バグを特定するため、不要な設定を削除していった結果以下のようになりました）をブラウザに表示させてみたところ……

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
	div{
		width:900px;
	}
	table{
		border:solid 3px black;
		border-collapse:collapse;
		width:100%;
	}
	
	table th{
		background-color:#ccc;
		border:solid 1px black;
	}
	
	table td{
		border:solid 1px black;
	}
</style>
</head>
<body>
	<div>
		<table>
			<thead>
				<tr>
					<th class="col1">th1</th>
					<th class="col2">th2</th>
					<th class="col3">th3</th>
					<th class="col4">th4</th>
					<th class="col5">th5</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="5">
						td1
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

普通のhtml5で表示したテーブル。
ie10で表示すると
f:id:hakoniwahaniwa:20131227151516p:plain
のようになります。

cssでは設定しているにもかかわらずth2～th5までのセルのborder-bottomが消えてしまっています。

さらに印刷プレビューを表示すると、
f:id:hakoniwahaniwa:20131227153209p:plain
となり、td1の左右のborderが消えてしまいます。

この現象はie10で確認しています。

いろいろ試した結果、th2～th5までのセルのborder-bottomが消えてしまったのはjqueryを読み込まなければ解消されるということが確認できました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

の記述を削除したら、
f:id:hakoniwahaniwa:20131227153641p:plain
のように表示されました。
jquery、ieのどちらのバグか定かではないですが。

しかし、印刷プレビューのほうはjqueryを消しても直りませんでした。

調べてみると結局のところborder-collapse:collapseが一番の元凶のようでした。

これはあきらめてborder-collapse:separateを使うほうが無難のよう。
ちょっと設定は面倒になるが、border-collapse:collapseの印刷時のバグが解決されない以上、

	table{
		border:solid 3px black;
		border-collapse:separate;
		border-spacing:0px;
		width:100%;
	}

として、擬似的にcollapseを実装するしかないか。