はてなブログでtableで表を作成したときに余計な改行が入る問題を解決してみる

はてなブログでは、「はてな記法モード」の状態でtableタグで直接表を入力すると、余計な改行（brタグ）が入り、表が下の方に離れてしまう問題があります。ソースコードを見たところ、改行が入った位置すべてにbrタグが入っていました。改行がある位置に無条件にbrタグが入ってしまうようです。

どうやら、2012年頃から指摘されている問題のようです。
2012-08-30
<table>内の改行が<br />に変換される不具合 - こりゃ、ほたえな

しかし、2013年7月においても改善されていないようなので、CSSで解決することとします。具体的には、tblblkクラスをCSSで定義して、tblblkクラスで囲まれた範囲は、th,td内のみbrを表示(display:inline)し、それ以外は非表示(display:none)としています。tableはtblblkクラスのdivの間に書きます。

tableをtblblkクラスで囲む必要はありますが、br問題の解決方法としては有効ですので、お悩みの方は是非試してみてください。

CSS

.tblblk br,
.tblblk table br,
.tblblk table tr br {
	display:none;
}

.tblblk table tr th br,
.tblblk table tr td br {
	display:inline;
}

HTML

<div class="tblblk">
	<table>
		<tr>
			<th>見出し１</th>
			<td>内容１</td>
		</tr>
		<tr>
			<th>見出し２</th>
			<td>内容２</td>
		</tr>
	</table>
</div>