こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSで任意の位置から縦罫線、横罫線を引きたい

 お早う御座います、CSSの初心者です宜しくお願い致します。

 CSSで任意の位置から縦罫線、横罫線をそれぞれ単独の線として引くのはどの様に書けば良いのですか。
 以上宜しくお願い致します。

投稿日時 - 2007-10-14 08:33:42

QNo.3427659

すぐに回答ほしいです

質問者が選んだベストアンサー

テーブルレイアウトでしたら、好きな位置に文字を書く事ができます。(普通のテーブルですから当然ですが)

table の中に文字を書き、css で必要ない枠線を表示させない感じです。(実際は必要な枠線を、border で表示させます)

複雑な表になるようでしたら、ペイントソフトで作成して、画像ファイルを表示させるのがよいと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>

</head>

<body>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-right:solid 2px #C0C0C0;width:150px;height:50px">&shy;</td>
<td style="width:150px">&shy;</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border:solid 2px #C0C0C0;border-bottom:solid 2px #C0C0C0;width:300px;height:50px;text-align:center">部長</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-right:solid 2px #C0C0C0;width:150px;height:50px">&shy;</td>
<td style="width:150px">&shy;</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="width:50px;height:50px">&shy;</td>
<td style="border:solid 2px #C0C0C0;border-bottom:none;width:200px">&shy;</td>
<td style="width:50px">&shy;</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border:solid 2px #C0C0C0;width:100px;height:50px;text-align:center">課長</td>
<td style="width:100px">&shy;</td>
<td style="border:solid 2px #C0C0C0;width:100px;text-align:center">課長</td>
</tr>
</table>

</body>

</html>

投稿日時 - 2007-10-14 23:51:10

お礼

outbraveさん、有り難う御座いました。
今後とも宜しくお願いします。

投稿日時 - 2007-10-15 00:28:16

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

下記URLで質問しましたが
縦罫線、横罫線は、文字一覧の罫線を使用しています
ただしフォント指定が必要です
font:17px/16px serif;
行間隔と等幅ホントを指定して下さい
横罫線は、思うどうり表示」出来ないかもおもいますが ??
IEのみ対応の場合は、記述どうりに表示しますがMACでは対応しません
CSSの初心者の場合MACでの対応の場合は、画像ファイルの表示が無難と思います

参考URL:http://oshiete1.goo.ne.jp/qa3419105.html

投稿日時 - 2007-10-17 00:30:36

ANo.1

table でレイアウトを決めてから、border で表示させればよいかと。

例:
<td style="border-bottom: solid 1px #FF9900">

投稿日時 - 2007-10-14 13:30:50

お礼

outbraveさん有り難う御座います。
組織図みたいなものを描きたいのですが、罫線の左右、下側にも自由に文字は書けるのでしょうか。
宜しくお願いします。

投稿日時 - 2007-10-14 22:38:37

あなたにオススメの質問