線が極端に細いテーブルで、特定の方向の線だけ表示させたい

解決済

質問者：ikazuti
質問日時：2004/02/20 00:13
回答数：2件

tableでは、frameを使用して特定の方向だけ線を表示させることが可能ですよね。

また、二つ重ね合わせることで極端に細い線のテーブルを作ることもできます。

ああいった細いテーブルで、さらに特定の方向の線のみを表示させる方法はあるでしょうか。
下だけとか上だけとか左右だけとか。

前に、画像などを使用せずにそんなことをしているページを見たことがあるので、不可能ではないと思うのですが……色々やってみても、できませんでした。

この方法を知りたいので、知っている方がいましたらぜひお教えください。

スタイルシートでもかまいません。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： gakushaneko
回答日時：2004/02/21 01:28

私も「スタイルシートでしょ」と思いましたので，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">

</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さんが紹介したのと，まったく同じになります）です。
また，この方法で指定するためには，場所が肝心ですので，ページのソースすべてを載せています。

- 0
- 件

通報する

この回答へのお礼

回答、遅くなって申し訳ありません。

できました。詳しいソース、ありがとうございます。

通報する

お礼日時：2004/03/18 01:03

No.1

回答者： noname#10926
回答日時：2004/02/20 00:24

>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;"