KAKIMASSE

ネットで見つけた面白い記事や、役立つのではと感じたネタなどを書いています。

xhtmlでtableタグの上下にぴったりと線を引きたい

   

なかなか言葉で説明するのが難しいので下を見てください。

sp
こんな感じ
sp

こんなバーで見出しを作りたい時、
大体は下のようにするんじゃないかと思います。

<div style="background-color: #80bfff;">
<img src="/space.gif" alt="sp" width="1" height="3" />
</div>
<table border="0" width="100%" summary="m" bgcolor="#0080ff">
<tbody>
<tr>
<td style="text-align: center; color: #fff;">こんな感じ</td>
</tr>
</tbody>
</table>
<div style="background-color: #00356a;">
<img src="/space.gif" alt="sp" width="1" height="3" />
</div>

でもこの場合、
PC、docomo、softbankでは上のバーと真ん中、下のバーが隙間なくぴったりついているんですが、
auだけ上下のバーと真ん中の間に2pxぐらいの隙間が出来てしまいます orz...

こういう時、画像でいちいち作らなくてもいい方法がないか、
色々実験とぐぐって以下の方法を発見しました。

<div style="background-color:#004a95;">
<div style="background-color:#80bfff;">
<img src="/space.gif" alt="sp" width="1" height="3" /><br />
<table width="100%" border="0" bgcolor="#0080ff" summary="m">
<tr>
<td style="text-align:center;color:#FFF;">こんな感じ</td>
</tr>
</table>
</div>
<img src="/space.gif" alt="sp" width="1" height="3" /><br />
</div>

かなり力技感がありますが、手元の携帯で確認したところ、
隙間なく綺麗に表示されています。

一応Another HTML-lint gatewayの文法チェックでも問題なかったので
新しい方法が見つかるまではとりあえずコレで行って見たいと思います。

 - 携帯サイト

SPONSORD LINKS

スポンサーリンク

スポンサーリンク

Message

メールアドレスが公開されることはありません。

  関連記事

no image
softbank携帯で動画ダウンロード時に「エラーが発生しました。(WJ46065E)」とエラーになる時の対応方法

softbank携帯向けに動画を配信したいと思っていて、 .3gpファイルを作成 ...