• ベストアンサー

テーブルのボーダーを細くできますか?

leaz024の回答

  • ベストアンサー
  • leaz024
  • ベストアンサー率75% (398/526)
回答No.1

ボーダーではどうしても幅が出てしまうので、こういうときは二重テーブルを使います。 <TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD bgcolor="BLACK"> <TABLE border="0" cellpadding="2" cellspacing="1"> <TR bgcolor="WHITE"> <TD>あいうえお</TD> <TD>かきくけこ</TD> </TR> <TR bgcolor="WHITE"> <TD>さしすせそ</TD> <TD>たちつてと</TD> </TR> </TABLE> </TD></TR></TABLE> 1つ目のテーブルを真っ黒の下地にし、その上にsellspacingが0でないテーブルを乗せます。 この時、2つ目のテーブルのバックを白にするために、TRタグのbgcolorを指定します。これをTABLEタグのbgcolorに設定すると、折角の下地が台無しになります。 1つ目のTABLEと2つ目のTABLEのcellpaddingとcellspacingの値をいろいろいじって、目的に合った表を作ってください。

kyoukorumi
質問者

お礼

すごい!できました。 こんな方法あったんですね。 目から鱗です。本当にありがとうございました。

関連するQ&A

  • CSSでテーブルボーダーを表示させたいのですが・・

    スタイルシートを使用したテーブルのボーダー表示について質問です。 スタイルシートで下記テーブルボーダー表示設定をしたところ、 IEでは表示されるのですが、Netscape7.0ではボーダーが全く表示されません。 table.01 {FONT-SIZE: 12px; border-collapse : collapse ; border-width : 1px 0 0 1px ; border-style : solid ; border-color : #37503D ; background-color:#FAFFFB;} table.01 td {border-width : 0 1px 1px 0 ; border-style : solid ; padding : 5px ; line-height:120%;} 現在調べているところですが、お解りになるかたがいらっしゃれば是非教えていただけないでしょうか。 どうぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • テーブルの線を立体じゃなく普通の線にしたい

    普通にテーブルで表を作ると線が立体的になってしまいますよね。 これを、特定のテーブルだけを普通の罫線だけで作られたような表にしたいと思っています。 テーブルを立体でなく罫線にするには、 【例1】 <STYLE type="text/css"> <!-- td{border-style:solid; border-width:1pt 1pt 1pt 1pt;border-color: #000000;} --></STYLE> というスタイルシートを<head>内に書く。 【例2】 <table bgcolor="#000000" border="0" cellspacing="0" cellpadding="0"> <tr><td> <table border="0" cellspacing="1" cellpadding="0"> <tr><td bgcolor="#ffffff">セル1</td><td bgcolor="#ffffff">セル2</td></tr> <tr><td bgcolor="#ffffff">セル3</td><td bgcolor="#ffffff">セル4</td></tr> </table> </td></tr> </table> という入れ子状態にする。 概ねこの2種類の方法が一般的だと思います。 が、【例1】の方法は作るテーブル全てがこのスタイルになってしまいます。 【例2】は小さい表にはいいですが、セルが大量にある表に使うのは無駄が多く、タグが複雑になるので修正時も面倒です。 これを、個々のテーブルに対して例1のようなスタイルシートを使用して作れないものでしょうか? <span>を使って出来そうな気がするのですが、いろいろ試すもののどうもうまくいきません。こういう場合の合理的な方法をご存知でしたら教えていただけますか。

    • ベストアンサー
    • HTML
  • テーブルの線を極細にしたい

    テーブルの線を細くしたいのですが、borderを1にしてもかなり太いです。 これはやはりスタイルシートでやるしかないのでしょうか? また、どのように記述すればいいのでしょうか? HP作成初心者のため、できるだけわかりやすく回答いただけると嬉しいです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ボーダーが反映されません

    スタイルシートです。一部略しています。 table.kiji_table { background-image: url("/img/kabe/beach.jpg"); border-top-width: 5px; border-top-color: brown; ] これでテーブルに画像は現れますが、ボーダーが出てきません。 何故かおわかりでしょうか?

  • Table のボーダーを非表示にしたいのですが。。。

    Table のボーダーを非表示にしたいのですが、 上手くいきません。 <Table border="0"> or <table> 上記の条件でも、 ボーダーが表示されてしまいます。 IEでの表示を想定しています。 ご存知の方いらっしゃいましたら、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • border-widthの太さ指定について

    スタイルシートで、罫線の太さをborder-widthで指定しようと思うのですが、1pxより細い線を指定することは可能でしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルを細線で表示させたい

    Dreamweaver8を使用しています。 テーブルを表示させると線が太くでてしまいます。 コードでは次のようになっていました。 <table width="50" border="1" cellpadding="0" cellspacing="0"> ボーダーは1よく低い値を入力できません。 ためしにエクセルのセルを貼り付けると細線で表示されました。 そのときのコードは、 <table cellspacing="0" cellpadding="0" class="excel1"> <tr> <td height="18" class="excel2" width="72" style="height:13.5pt;width:54pt;"> </td> </tr> </table> となっていて非常に複雑です。 テーブルのシンプルな細線はどうやって作成できますか? よろしくお願いします。

  • テーブルの角を丸くして、立体的に

    先日、IEでも閲覧可能で、 テーブルの線を細くするスタイルシートを このように教えて頂きました。 このスタイルシートから、 テーブルの角を丸くして、 立体的にする書き方を教えて頂けると とっても助かります。 ------------ <!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"><!-- table.WebDesign{ border-collapse: collapse; width: 400px;} table.WebDesign,table.WebDesign td{border:solid 1px #1C79C6;} --></style> </head> <body><div> <table class="WebDesign"> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> </table> </div></body></html>

    • ベストアンサー
    • CSS
  • テーブルの線の色が指定できない

    テーブルの線の色が指定できないうえ、最後に宣言したスタイルシートが適用されてしまいます。 理由がわかりません。 <style type="text/css"> table, td, th.bordercolor_white { border: 1px white solid; } table, td, th.bordercolor_red { border: 1px red solid; } </style> <table class="bordercolor_white"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> このような文だと、 <table class="bordercolor_white">としているのに、 なぜかテーブルの線の色は、赤になってしまいます。 table, td, th.bordercolor_red { border: 1px red solid; } table, td, th.bordercolor_white { border: 1px white solid; } のように、順番を入れ替えると、最後に宣言した白になります。 なので、<table class="bordercolor_white">の部分は無視されるようです。 二つのテーブルの線の色を用意した場合、 任意でテーブルの線の色を付ける方法をご教授ください。

    • 締切済み
    • CSS
  • スタイルシートを使うとボーダー関連設定の挙動が変わる?

    tableタグには、 bordercolordarkと、bordercolorlightがありますが、 スタイルシートには、border-colorしか指定出来ません。 tableタグでbordercolorを指定すると格子状に全体の枠線に反映されるのに対し、 スタイルシートでtableタグにクラス指定でborder-colorを記述しても、外枠しか反映されません。 この変の挙動の決まりがよく分からないのですが、 どなたかお詳しい方はいらっしゃいませんでしょうか? ちなみに、今実現したいことは、 tableに立体感の無い枠線(影なし1色)を付け、各セルを区切る線も同色で書きたいのです。 外枠だけは少し太めにし、一番上の行は見出し行とし、枠線と同色で塗りつぶすので、その塗りつぶしたセルと枠線との間に溝が出来ないようにしたいのです。 また、文字数制限があるので、極力スタイルシートを利用して、同じコードを書かないようにしたいのです。 ややこしくて恐縮ですが、お知恵をお借りしたくお願い致します。

    • ベストアンサー
    • HTML