- ベストアンサー
線が極端に細いテーブルで、特定の方向の線だけ表示させたい
tableでは、frameを使用して特定の方向だけ線を表示させることが可能ですよね。 また、二つ重ね合わせることで極端に細い線のテーブルを作ることもできます。 ああいった細いテーブルで、さらに特定の方向の線のみを表示させる方法はあるでしょうか。 下だけとか上だけとか左右だけとか。 前に、画像などを使用せずにそんなことをしているページを見たことがあるので、不可能ではないと思うのですが……色々やってみても、できませんでした。 この方法を知りたいので、知っている方がいましたらぜひお教えください。 スタイルシートでもかまいません。 よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
私も「スタイルシートでしょ」と思いましたので，No.1のdoconimoさんのアドバイスで充分かと考えましたが，まぁ，こういう方法もありますよ・・・と言うことで・・・。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>お試し</TITLE> <STYLE type="text/css"> <!-- .line0{ border-bottom-width : 1px; border-bottom-style : dotted; border-bottom-color : blue; } .line1{ border-bottom-width : 3px; border-bottom-style : double; border-bottom-color : #0000ff; } .line2{ border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : blue; } .line3{ border-left-width : 1px; border-left-style : solid; border-left-color : #0000ff; border-right-width : 1px; border-right-style : solid; border-right-color : #0000ff; } --> </STYLE> </HEAD> <BODY> <TABLE border="0" width="263" class="line0"> <TBODY> <TR> <TD><BR> </TD> </TR> </TBODY> </TABLE> <TABLE border="0" width="263" class="line1"> <TBODY> <TR> <TD><BR> </TD> </TR> </TBODY> </TABLE> <TABLE border="0" width="263" class="line2"> <TBODY> <TR> <TD><BR> </TD> </TR> </TBODY> </TABLE> <P>わかりにくいので文字と＜P＞タグを入れているだけです</P> <TABLE border="0" width="263" class="line3"> <TBODY> <TR> <TD><BR> </TD> </TR> </TBODY> </TABLE> <TABLE border="0" width="263" class="line2"> <TBODY> <TR> <TD class="line2"><BR> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 一応，下のみにラインを表示させています。 「bottom」をそれぞれ「top」に変えれば，上のみのラインになります。 同じ要領で，左右については，No.1のdoconimoさんのアドバイスを参照してください。 また，左右に・・・と言うことですと，line3のように指定しなければなりません。 私が紹介した方法ですと，いくつも同じテーブルを作るとき，1回の指定で済むようになります。 また，長さが違いますが，最後のように別々のタグでも指定可能になります。 なお，line0は点線，line1は二重線（二重線として表示させるためには，必ず，3px以上にしてください），line2は実線（No.1のdoconimoさんが紹介したのと，まったく同じになります）です。 また，この方法で指定するためには，場所が肝心ですので，ページのソースすべてを載せています。
その他の回答 (1)
>tableでは、frameを使用して特定の方向だけ線を表示させることが可能ですよね。 意味不明ですが、ままいっか。 >スタイルシートでもかまいません。 て、言うかスタイルシートでしょ。 例 1.下だけ <TABLE border="0" style="border-bottom-width : 1px;border-bottom-style : solid;border-bottom-color : blue;"> <TBODY> <TR> <TD width="118"><BR> </TD> <TD width="145"><BR> </TD> </TR> <TR> <TD width="118"><BR> </TD> <TD width="145"><BR> </TD> </TR> </TBODY> </TABLE> 2.上だけ style="border-top-width : 1px;border-top-style : solid;border-top-color : black;" 3.右だけ style="border-right-width : 1px;border-right-style : solid;border-right-color : lime;" 4.左だけ style="border-left-width : 1px;border-left-style : solid;border-left-color : red;"
お礼
回答が遅くなって申し訳ありません。 これで、できました。 ＞て、言うかスタイルシートでしょ。 いや、そのサイトでは確かスタイルシートを使ってなかったような気がするんですよね。 まあ、できたんでよいですが。 ありがとうございました。
お礼
回答、遅くなって申し訳ありません。 できました。詳しいソース、ありがとうございます。