旅モバ

旅、モバイル、サーバ関連(Linux,FreeBSD)、クラウド・Webサービス、その他PCの話題など。

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

f:id:tabimoba:20130708112331j:plain:leftはてなブログでは、「はてな記法モード」の状態で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>見出し1</th>
			<td>内容1</td>
		</tr>
		<tr>
			<th>見出し2</th>
			<td>内容2</td>
		</tr>
	</table>
</div>