• ベストアンサー

スタイルシートで<table>の内側の線の表示

<table>タグでcellspacing=0にしないと二重線になりますよね? スタイルシートを使ってこの二重線の内側だけを表示することができますか? またその際、色や太さを指定することができますか?

  • HTML
  • 回答数5
  • ありがとう数7

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

  • ベストアンサー
noname#5537
noname#5537
回答No.4

<table style="border: 2px solid red;"> <tr><td style="border: 2px solid blue;">123</td><td style="border: 2px solid black;">456</td></tr> <tr><td style="border: 2px solid green;">789</td><td style="border: 2px solid yellow;">ABC</td></tr> </table> ↑こういうのを試してみると、 どういうことになっているのかよく分かると思います。 赤が table の border で、青黒緑黄が td の border です。 で、前に書いたのが違うとすると yukiusa さんがなさりたいのは、 ↓こんなのでしょうか? <table border="0"> <tr> <td style="border-bottom: 1px solid blue; border-right: 1px solid blue;">123</td> <td style="border-bottom: 1px solid blue; border-left: 1px solid blue;">456</td> </tr> <tr> <td style="border-top: 1px solid blue; border-right: 1px solid blue;">789</td> <td style="border-top: 1px solid blue; border-left: 1px solid blue;">ABC</td> </tr> </table>

yukiusa
質問者

お礼

は~なるほど。<td>にスタイルをつけるんですね~。 なんで思いつかなかったんだろ~。 ありがとうございました!

その他の回答 (4)

noname#107580
noname#107580
回答No.5

こんにちは! ><table style=border-・・・>と書くと、 「外側」の線のみ表示されてしまいますよね? ですので、「内側」の線のみ表示される書き方があるかな?と思って質問してみました。 えーと・・ テーブルに指定すると、外枠に付きますし、セルに指定すると内枠に付きます。 <table style=border-style:solid;border-color:#ff0000> <tr> <td style=border-style:solid;border-color:#ff0000>aa</td> <td>bb</td> </tr> <tr> <td>cc</td> <td>dd</td> </tr> </table> >普通に<table borde=1>のように「外側」「内側」両方表示させるのはスタイルシートではどうやって書くのでしょうか? 2重線にすれば多少近づくかな・・(;^_^A <html> <head> <title>ボーダーの違い</title> <style type="text/css"> <!-- .red_3 { border: 3px double #FF0000; } --> </style> </head> <body> <table width="200" border="1" bordercolor="#FF0000"> <tr> <td>html</td> </tr> </table> <br> <table width="200" border="0" class="red_3"> <tr> <td>css</td> </tr> </table> </body> </html> ちょっと苦しい・・m(_ _)m ・・とここまで書いて、yukiusaさんの最初の質問の意味がやっと分かりました。 ・・で、質問の意味は分かったんですが・・ 答えが分かりません・・・またまたm(_ _)m せっかく書いたのでそのまま送信・・失礼しました・・。

yukiusa
質問者

お礼

<td>にスタイルを書けばいいんだと分かりました! でも、もうちょっとひねってすっきりした書き方がありそうな気がしてきました。 が、初めの質問の謎は解けました。ありがとうございました。m(__)m

noname#107580
noname#107580
回答No.3

こんにちは! こんな感じですか? <head> <title>テーブルにも指定できます</title> <style type="text/css"> <!-- .red_3 { border: 3px solid #CC0000; } --> </style> </head> <body> <table width="400" border="0" cellspacing="5" cellpadding="5"> <tr> <td class="red_3">ネスケ4.*には</td> <td class="red_3">対応していません。</td> </tr> <tr> <td class="red_3">Macは</td> <td class="red_3">どうだったか???</td> </tr> </table> </body> </html>

yukiusa
質問者

お礼

回答ありがとうございます。 <table style=border-style:solid;border-color:#ff0000>と書くと、 「外側」の線のみ表示されてしまいますよね? ですので、「内側」の線のみ表示される書き方があるかな?と思って質問してみました。 ちなみにMAC IEでも同じように表示されます。 【border】というCSSは何を指しているのでしょうか? そもそも私、ちょっと勘違いしているような気がしてきました。 普通に<table borde=1>のように「外側」「内側」両方表示させるのはスタイルシートではどうやって書くのでしょうか?

noname#5537
noname#5537
回答No.2

<table border="0"> <tr><td style="border: 1px solid blue;">123</td><td style="border: 1px solid blue;">456</td></tr> <tr><td style="border: 1px solid blue;">789</td><td style="border: 1px solid blue;">ABC</td></tr> </table> こんなのでしょうか?

yukiusa
質問者

お礼

回答ありがとうございます。 <table style=border-style:solid;border-color:#ff0000>と書くと、 「外側」の線のみ表示されてしまいますよね? ですので、「内側」の線のみ表示される書き方があるかな?と思って質問してみました。 そもそも私、ちょっと勘違いしていますかね? 普通に<table borde=1>のように「外側」「内側」両方表示させるのはスタイルシートではどうやって書くのでしょうか?

回答No.1

こんにちは。  ちょっと、勘違いされていませんか?  Cell Spacing ・・・セル間の幅、です。2重線とかそういう問題ではありません。セルとセルの間の幅をどれくらいにするか、です。従って、0にすればセル同士の線が重なってソリッド線に見えますし、1以上にすればセルとセルの間に隙間ができるので、2重線を引いているように見えます。このため「内側」とか、そういうものは存在しません。というより、「内側の線だけの2重線」というのが想像できないのですが・・・2重のうちの内側だけって、1重線じゃないの??  border系で表現できることでしょうか?

yukiusa
質問者

お礼

質問の書き方が悪かったですね。 すみませんでした。

関連するQ&A

  • スタイルシートでtable位置を指定したい

    スタイルシートでtable全体の位置をセンターへ持って行きたいのですが、調べてもテキストのalignしか出てきません。 tableそのものをセンターへ持って行くにはhtmlファイルのtableタグ内でaligh="center"とするか、スタイルシートでcenterを指定するにはtable全体をdivなどで囲んでdivの要素としてcenterを指定してやるしかないのでしょうか。 できれば<table class="xxxx">として1つにまとめたいのですが。 解決方法ご存じの方ぜひ教えてください。

    • ベストアンサー
    • HTML
  • スタイルシートの書き方

    HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな(?)スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか? 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>

    • ベストアンサー
    • CSS
  • IE8だと内側に線が引かれてしまいます。

    ブラウザ IE8 スタイルシートで例として ------------------------ h3{ width:230px; height:60px; background:#000; border:3px double #000; color: #ffffff; } ----------------------- このように背景と線の色を同じにすると内側に線が引かれるので2重線になりません。 IE7だと外側に線が引かれるので綺麗な2重線になるのですが・・・ IE8でも外側に線を引くことは可能なのでしょか? 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • スタイルシートで表を作成

    スタイルシートで、表を作りたいと思います。<TD>ごとにではなく、<TABLE>内に指定して、PADDINGやフォントサイズをいっぺんに反映させたいです。 指定したいのは、FONT、PADDING、SPACINGです。表自体はTABLEタグで作ります。よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • スタイルシートによるTABLE内フォントの制御は可能?

    スタイルシートで指定した内容(フォントの設定)は <TABLE>タグ内でも有効でしょうか? 出来ると思ってやったんですが、うまく反映されないです。 記述がおかしいのか、元々<TABLE>タグ内のフォントには 反映されないものなのか知りたいです。 恐らくとても初歩的な質問なのだと思いますが、 お時間ありましたら教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • セルの周りの線だけを表示させるには?

    ホームページビルダーで表を作る際の質問です。 http://item.rakuten.co.jp/hotclothing/wpc61104/ 上記URLの左側のメニューのように、セルの周りだけ線を表示させるにはどのようにしたら良いでしょうか?cellspacing borderなど色々数値を変えてみたのですが、どうしてもセル周りの線だけを表示させる事が出来ません。 <table border="0" width="180" height="103" cellspacing="2" cellpadding="0"> このように打つと点線でセル周りだけ表示できるのですが、この点線部分だけを色を指定して表示させたいのです。 どなたかご存知の方いらっしゃいましたらご教授くださいませ。約8時間ほど悩んでいます・・・・。

  • スタイルシートは直接指定より優先されるのでしょうか?

    一行ずつグレー、白としたいのですが、 スタイルシートは直接指定より優先されてしまうでしょうか? .tr{ background-color : #FFFFFF; } <table> <tr> <td> 白 </td> </tr> <tr> <td bgcolor="glay"> グレーくならない </td> </tr> </table> いままで使っていなかったtbodyタグでスタイルシートの背景色を指定していますが、スタイルシートを使う限りこの方法しかないでしょうか?

    • ベストアンサー
    • HTML
  • スタイルシートでかけるものはスタイルシートを使った

    非推奨タグでなくても、スタイルシートでかけるものはスタイルシートを使ったほうが良い? htmlでサイトを作ってるのですが、スタイルシートを使うべきかhtmlで書くべきか、 どちらでもかける場合があります。 その際どちらを使ったほうがいいのでしょうか?

    • ベストアンサー
    • HTML
  • firefox対応で表(<table>)を中央に表示したい

    インターネットエクスプローラ(IE)では表(<table>~</table>)の中央表示 をスタイルシートの style=text-align: center; で指定できたものが、 FireFoxでは通用しないようです。 tableタグにてalign=centerと指定すれば中央表示できるものの、これは非推奨であるため今後のことを考えて使用を避けたく考えております。 非推奨要素を使用せず表を中央に表示する方法はあるのでしょうか?

    • ベストアンサー
    • HTML
  • スタイルシート 全体と個別?

    スタイルシートで table { width="100%"; }と定義しているところで、 <table>タグを書くと100%で表示されます。 これはこれで全てのテーブルタグが一律そうなって便利ですが、 特定のテーブルだけ width="100px"にしたいのですが可能でしょうか? CSSの仕組みを理解していないのでお分かりの方教えてください。 全て一律で定義した状態で、特定のテーブル(タグ)だけ別のスタイルにしたいです。 特定のテーブルだけ<table width="100px">や <table style="width:100px">としましたが、私のミスか全体のスタイルシートの設定ままでした。

    • ベストアンサー
    • HTML

専門家に質問してみよう