• ベストアンサー

枠線をつけたい

IEの新しいバージョンでテーブルのborder colorが効かない?ようなのでCSSで指定しようとしているのですが、うまくいきません。。 別のCSSファイルに指定する方法で、 テーブルと、その中のセルの枠に、薄くて細いグレー(#CCCCCC)の細い枠線をつけたいのですが、どのように指定すればよいでしょうか。 なお、同ページに他のテーブルもあり、枠線をつけたいのは特定の1つのテーブル内のみです。 よろしくお願いいたします。

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

  • ベストアンサー
  • 4017B
  • ベストアンサー率73% (1304/1775)
回答No.1

該当する table に id名 を割り振り、それに対して枠線を指定します。 /* HTML部分 */ <table id="my-table"> <tr><td>OKWaveはステキな質問箱!</td></tr> </table> /* CSS部分 */ table#my-table, table#my-table tr, table#my-table td { border: none; } table#my-table, table#my-table td { border-collapse: collapse; border: 1px solid #ccc; } 大まかにはこんな感じで。

dratiger
質問者

お礼

どうもありがとうございました!一発で解決しました。

関連するQ&A

  • Tableの枠線(内・外)色を変更

    Tableの枠線(内・外)色を変更する場合、 CSSだと、 .Table { border-color:#FFFFFF; } .Table TD{ border-color:#FFFFFF;} .Table TR{ border-color:#FFFFFF;} で変更できますが、 これをJacasvriptで対応するにはどのようにしたらいいのでしょうか? FireFoxもIEも対応したいと思っています。 BorderColor="#FFFFFF"だけだと、 FireFoxで枠線の外側しか変更できません。 たぶんCSSと組み合わせる必要があると思います。 よろしくお願いします。

  • FireFoxでのtable枠線の表示/非表示

    下記HTMLコードは テーブル(TDレベル)の枠線を表示するCSSクラスと 非表示とするCSSクラスを用意し、ボタンを押す事 によりjavascriptでCSSクラスを変更するものです。 <html> <head> <style TYPE="text/css"><!-- table.tclass { border-collapse:collapse; } td.b { border: 1px solid; border-color:#000000; } td.w { border:noe; border-color:#FFFFFF; } --></style> <script Language="JavaScript"><!-- function delLine(elem){ var obj = document.getElementById(elem); obj.className = "w"; } // --></script> </head> <body> <table class="tclass"> <tr> <td class="b" id="td1">Table1</td> <td class="b" id="td2">Table2</td> </td> </tr> </table> <button type='button' onclick='delLine("td2");' >枠線を消す</button><br> </body> </html> 上記のように2つのテーブルセルのうち、右側セルの枠線を 消したいのですが、 右側セルの右枠だけ消えて、残りの枠は表示され たままになります。 因みに onclick='delLine("td1");delLine("td2");' のように、両方のセルともに枠線を消す場合は問題ありません。 また、tableタグのborder-collapse:collapse指定を外しても 成功する事を確認していますが、border-collapse:collapseは できれば指定したいです。 また、FireFox以外ではIE、safari、operaでは問題ありません。 何か対処方法をお分かりの方がおりましたらお教えください。 よろしくおねがいします。

    • ベストアンサー
    • HTML
  • 枠線が表示されません

    初歩的な質問ですみません。 以下のようなテーブルを組んでいるのですが 枠線が表示されません。 どこがおかしいのでしょうか? 宜しくお願いします。 ==================================HTML================================== <html> <head> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <table class="table1"> <tr> <th>左</th> <th>真ん中</th> <th>右</th> </tr> <tr> <td class="blue">1</td> <td class="blue">田中</td> <td class="blue">55</td> </tr> <tr> <td class="white">2</td> <td class="white">鈴木</td> <td class="white">42</td> </tr> <tr> <td class="blue">3</td> <td class="blue">斉藤</td> <td class="blue">20</td> </tr> </table> </body> </html> ==================================CSS================================== /*テーブル全体*/ .table1 { border-collapse: collapse; /* 枠線の表示方法 重ねる */ border: 2px #757575 solid; /* テーブル全体の枠線(太さ・色・スタイル)solid:実線 */ margin-top: 10px; /* 表示位置 */ margin-left: 25px; /* 表示位置 */ } /*テーブルの見出し部分*/ th { font-size:10pt; text-align:left; /*左寄せ*/ color:#888888; /*テキスト色*/ background-color:#B8B8B8; /*背景色*/ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ border-spacing: 0; /* 隣のセルとの間隔 */ } /*テーブルのデータ部分*/ td { font-size:10pt; text-align:left; /*左寄せ*/\ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ } .blue{ background-color: #CCCCFF; } /* セル色:青 */ .white{ background-color: #FFFFFF; } /* セル色:白 */ /*背景色と文字色*/ body { background-color: #969696; color: #000000; }

    • 締切済み
    • CSS
  • cssを使った枠線の表示について

    css初心者です。宜しくお願いします。 タグ打ちしたHTMLファイルとcssファイルがあります。 cssファイルに「.waku {BORDER-WIDTH:5px;BORDER-COLOR:#FFFFFF;BORDER-STYLE:SOLID}」と記述し、 HTMLに「<P CLASS=waku>適当な文字列</P>」としました。 この、「適当な文字列」の周りに5pxの白い枠線が表示されたところまではうまくいったのですが、画面の左右いっぱいまで枠線が延びています。 (1)文字列の幅に合わせて、自動的に枠の幅を変えるにはどうすればいいのでしょうか? (2)この枠の幅を「画面の50%」あるいは「500px」などと指定することは可能でしょうか? (3)文字列と枠線との間隔を調整することは可能でしょうか? 余談ですが、cssの記述の際、スペースを多様している例をよく見かけます。 冒頭での私の書き方でも正常に動作しているようですが、「.waku { BORDER-WIDTH : 5px ; BORDER-COLOR : #FFFFFF ; BORDER-STYLE : SOLID }」このように (4)各文字列や値の前後にスペースを入れる理由を教えてください。

  • テーブルのボーダー(枠線)は何で指定したらいいですか?

    テーブルの枠線の指定の仕方について質問です。 HTMLだけで指定するのであれば、 <table border="1"> ~~ </table> といった感じなのでしょうが、CSSも併用している場合、CSSで td{border:solid;] とし、HTMLでは <table> ~~ </table> という風に簡単(?)に書いたほうがいいんでしょうか? なんでも見た目はCSSで定義しろとのことですし、テーブルの枠線ってHTMLとCSSとどっちで定義するのがいいんでしょうか? 分かりにくい質問で申し訳ありません。初心者のため書き足りないところあるかもしれませんが、よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルの枠線(外内両方)をすべて同じ太さ(1px)にしたい

    はじめまして。 cssから初めて、いま初めてテーブルタグを触っているのですが・・・ おそらくとても初心者なことだと思うのですが、tableタグの枠線の太さを揃える方法がわかりません・・・ <table ~>で直接HTMLで指定すると重なり合う2つのborderのおかげで2px分のテーブルが表示されます。 これを1px分だけの細い(ここのサイトもそうだと思います。)テーブルを作りたいのですが、こちらはCSSでそれぞれのセルに対してこのセルはbottomだけ、このセルはleftだけ、というように指定していかなければいけないのでしょうか? テーブル自体ほとんど触ったことはないのですが、なぜか余計にややこしいことをしているような気がして質問させていただきました。 どうかよろしくお願致します。

    • ベストアンサー
    • HTML
  • ビルダー7。TABLEの枠線を色々指定したい

    ホームページビルダー7を使っています。 テーブルの枠線の色を変えたり、枠線を点線で表示したりしたいのですがうまくいきません。。。 ビルダーには簡単に枠線を指定できる機能はないのかなと思い、以下のようなタグも打ってみました。 <TABLE width="500" height="237" border-color="#ffccaa" dotted> 結果、やっぱり枠線はでてきません。 タグの順番とかがおかしいのでしょうか。 どなたかわかる方教えてくださいー。

  • 消えた枠線をもとに戻す方法

    Excel2010です。 セルを全選択して セルの背景色を例えば、白色に設定します。 するとセル間の枠線も白色になり消えてしまいます。 これを元に戻したいのですが 罫線のところで枠を選んだでも元と同じ薄いグレー色の枠線をつけることができません。 どうすれば良いでしょうか?

  • ホームページ 点線の入った表の書き方(CSSを使って)

    表を作っています。 何度もチャレンジしながらやりましたが・・ギブアップ・・・分かりません。。わかる方がいらっしゃったら教えてください。 http://hw001.gate01.com/with-flower/tesuto/article04.html (1)1つの枠の中(物件)で区切りに点線を入れたいのですが、どのようにしたらいいでしょうか? (2)上下に重なった枠線を片方だけにできないでしょうか? または改行を入れようと思ったのですが、間隔が広すぎておかしくなります。改行幅の指定はできるのでしょうか? ↓CSS .solid {border-width:1px; border-style:solid; border-color:#330000;} .dashed {border-width:1px; border-style:dashed; border-color:#cccccc;}

  • CSSでの枠線付きの丸角ボックスの作り方

    テーブルタグを使わずに CSS で枠線付きの丸角ボックスを作成するには、どのようにしたらいいでしょうか。 ・背景色 #FFFFFF ・前景色 #FFFFFF ・枠線色 #CCCCCC ・枠線の太さ 1px ・丸角の半径 5px ・ボックスの横幅は固定ではなくパーセントで指定したい。 よろしくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう