tableでは、frameを使用して特定の方向だけ線を表示させることが可能ですよね。
また、二つ重ね合わせることで極端に細い線のテーブルを作ることもできます。
ああいった細いテーブルで、さらに特定の方向の線のみを表示させる方法はあるでしょうか。
下だけとか上だけとか左右だけとか。
前に、画像などを使用せずにそんなことをしているページを見たことがあるので、不可能ではないと思うのですが……色々やってみても、できませんでした。
この方法を知りたいので、知っている方がいましたらぜひお教えください。
スタイルシートでもかまいません。
よろしくお願いします。
No.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さんが紹介したのと,まったく同じになります)です。
また,この方法で指定するためには,場所が肝心ですので,ページのソースすべてを載せています。
No.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;"
回答が遅くなって申し訳ありません。
これで、できました。
>て、言うかスタイルシートでしょ。
いや、そのサイトでは確かスタイルシートを使ってなかったような気がするんですよね。
まあ、できたんでよいですが。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
- Illustrator(イラストレーター) 「頂点で線分を伸ばす」作業がうまく行かない。 1 2022/09/09 10:19
- 車検・修理・メンテナンス 白い車の車体表面に、極細の線のような灰色の汚れたものがある。 1 2023/06/26 20:39
- モニター・ディスプレイ 画像解像度について 4 2022/05/30 16:05
- FTTH・光回線 AU光回線の速度が出ません 2 2022/07/30 16:05
- テレビ テレビ 画像が乱れる横に線が入る 特にNHKが多い 7年ぐらい使用しているテレビです 画像が乱れるこ 7 2022/11/13 15:15
- Wi-Fi・無線LAN Wi-Fiルーター禁止マンションでネットを無線利用する方法を教えてください 7 2022/09/28 02:26
- MySQL 【MySQL】本当に困っています。詳しい方、ご教授よろしくお願いします。 1 2023/06/03 14:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLフォームのSELECTの幅を一...
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
INPUT TEXT内の文字位置を指定...
-
CSSで見出し(タイトル)行の右...
-
線が極端に細いテーブルで、特...
-
cssでheight: auto;を指定して...
-
macとwindowsのレイアウト崩れ...
-
IEでCSSの中央寄せが効かない
-
端から端まで横線を引きたい
-
スタイルシートで均等割りつけ...
-
text-alignの解除の方法
-
エクセルでサイズに合ったもの...
-
htmlでテーブル内にテキストボ...
-
<tbody>は何のためにあるんでし...
-
Excel で等間隔で縦線を引きた...
-
表の幅が広がる
-
PDFへてのテキストボックスにて...
-
指定時間になったら、WEBサイト...
-
ホームページの文字が縦に表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
なぜ左に寄っているの?
-
インラインフレームの表示位置...
-
text-alignの解除の方法
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
FireFoxで見るとブラウザの幅に...
-
macとwindowsのレイアウト崩れ...
-
ホームページビルダー 空白の...
-
<legend>で表示されるタイトル...
-
INPUT TEXT内の文字位置を指定...
-
CSSで、height:100%の中央寄せ
-
CSSの設定
-
テキストボックスの様に文字の...
-
フッターだけが真ん中に行って...
-
スタイルシートでh1の属性行間...
おすすめ情報