- ベストアンサー
[CSS]th要素の色設定
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Mac は持ってないのでわかりませんが、次のように table, th, td それぞれの要素に対し CSS で border を指定すればできるかもしれません。 table {border-top:solid 1px #999; border-left:solid 1px #999;} th,td {border-bottom:solid 1px #999; border-right:solid 1px #999;} th {color:#f00;} <table border="0" cellspacing="0" cellpadding="5" summary="サンプル"> <tr> <th>TH1</th> <th>TH2</th> </tr> <tr> <td>TD1</td> <td>TD2</td> </tr> </table>
関連するQ&A
- hr要素をCSSで一括指定する
hr要素をCSSで一括指定しようと考えております。 手元のタグ辞典や、CSS関連のサイトを見ても利用できるプロパティの一覧が見つかりません。 下記のように指定する場合に、他に利用できるプロパティがありましたらご教授願います。 hr { color: #ffCCCC; background-color: #ffCCCC; height: 3px; border-style: dotted; } ※border-styleに関しては、dotted以外のもの（solid等）も把握しております。 特に、hr要素の上下に余白をとる（上下に一行分の余白）方法を探しています。 この記述でIE、NNでも問題なく表示されるのでしょうか…。
- ベストアンサー
- HTML
- table[summary="テーブル１"]th
css thの色がつかない htmlで、テーブル１というテーブルがあります。 スタイルシートで table[summary="テーブル１"]{ background-color: gray; } とすると、テーブル全部に色が付きますが、 table[summary="テーブル１"]th{ background-color: gray; } だと何も起こりません。 テーブル１には、thタグはあります。 なぜ反応しないのでしょうか？
- ベストアンサー
- CSS
- ＣＳＳを消して表に色を付けたい！！！
参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「ＣＳＳが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> １．ＣＳＳを全て解除しなければいけないのですか？ ２．メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか？
- 締切済み
- HTML
- フルCSSプロフェッショナルテンプレの表作成
ビルダー15に同梱のフルCSSプロフェッショナルテンプレートで、まったく別の色の表を作成したいのですが、フルCSSのせいで、背景色が反映されません。 １、まったく別の表のためのCSSはどのように書けばいいのでしょうか？ ２、それをどのように記述すればよいでしょうか？ ３、または、フルCSS”表のデザイン”で選んだ表は、文字が小さく嫌なので、文字を大きく表示する方法はあるのでしょうか？（文章ごとにフォントサイズの変更しなきゃだめ？） ↓↓こんな感じで書いてみたのですが・・・。 CSSコード .example table { width: 640px; border: 1px #ff6347 solid; border-collapse: collapse; } .example td { border: 1px dashed; background-color: #ff6347; padding: 0 6px; } .example th { border: 1px dashed; background-color: #9acd32; } HTMLコード <div class="example"> <table> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> <th>1-4</th> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> </div>
- ベストアンサー
- ホームページ作成ソフト
- ie8のcssでcol要素のwidthがきかない
ie7でうまく表示しているソースで、先日ie8にアップグレードし表示を確認しましたら、セルの幅の設定がうまくいかず、すべてのセルの幅が同じ長さ(省略値?)になっていました。 いろいろと確認して行くと、どうもcol要素のcssのwidthが無視されているようでした。 cssはまだ勉強し始めたばかりで詳しくありません。cell11,cell12の中にwidthを指定すればwidthは有効のようです。 どなたか、どこを修正すれば直るか教えてください。ソースは以下の通りです。 ------------------------------------------- htmlのソース <table class="table2"> <col class="col41"> <col class="col42"> <col class="col51"> <col class="col52"> <col class="col41"> <col class="col42"> <col class="col51"> <col class="col52"> <tr> <th class="cell12" colspan="2" align="center" nowrap>３月</th> <th class="cell12" colspan="2" align="center" nowrap>４月</th> <th class="cell12" colspan="2" align="center" nowrap>５月</th> <th class="cell12" colspan="2" align="center" nowrap>６月</th> </tr> <tr> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> </tr> <tr> <td class="cell12" nowrap>100</td> <td class="cell12" nowrap>200,000</td> <td class="cell12" nowrap>50</td> <td class="cell12" nowrap>100,000</td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> </tr> </table> ----------------------------------------- cssのソース .table2 { border : 0px solid black ; border-collapse: collapse ; margin: 0px; padding: 0px; } .col41 { /* 緑 各月 点数 */ text-align: right; width: 50px; background-color: #e0ffff ; } .col42 { /* 緑 各月 金額 */ text-align: right; width: 80px; background-color: #e0ffff ; } .col51 { /* 白 各月 点数 */ text-align: right; width: 50px; background-color: #ffffff ; } .col52 { /* 白 各月 金額 */ text-align: right; width: 80px; background-color: #ffffff ; } .cell11 { border-right : 1px solid silver ; border-bottom: 1px solid black ; } .cell12 { border-right : 1px solid silver ; border-bottom: 1px solid silver ; } よろしくお願いします。
- ベストアンサー
- CSS
- セルを結合してもCSSで設定した一つ分の幅で表示されます
tableタグを使用して表を作成しており、幅や罫線などの装飾はすべてCSSを使用しています。 質問は、WindowsのIEのみで発生する事象についてです。 colspanで結合しているthタグやtdタグがいくつかあるのですが、それらがCSSのwidthで設定した幅の一つ分で表示されてしまうのです。 FirefoxやSafari、Mac版IEでは発生しません。結合したセルの幅で表示されます（例：widthで100pxを設定し、colspan="3"なら、300pxで表示）。 これはWindows IEのバグでしょうか？ ネット上でかなり探してみましたが、情報は得られませんでした。 解決策・回避策をご存じの方、ご教示ください。
- 締切済み
- HTML
- CSSでのtableの複雑なborder指定の仕様について
CSSでのtableの複雑なborder指定の仕様について 現在、以下のようなborder設定を持つtableを作りたいと考えています。 線の太さが違っているのは、border-colorの指定を表しています。 ┏┯┯┳┯┯┳┯┯┓ ┠┼┼╂┼┼╂┼┼┨ ┠┼┼╂┼┼╂┼┼┨ ┣┿┿╋┿┿╋┿┿┫ ┠┼┼╂┼┼╂┼┼┨ ┠┼┼╂┼┼╂┼┼┨ ┗┷┷┻┷┷┻┷┷┛ データ量削減のため、colgroupとtrへのCSS指定だけで、 tdにはCSSを指定しない、という実現方法が理想的です。 ですが、自分で色々と試したものの、どうもうまくいきません。 やむを得ず、tdにCSSクラスを直接指定するにしても、 ある線の色を変えるには、どのtdにどんなCSSを指定すればいいのか、法則が掴めません。 一体どのような仕様になっているのでしょうか。 なお、対応ブラウザはIE6～8のみで構いません。
- ベストアンサー
- HTML
- tbody要素に削除出来ないマージンが入る
table要素の thead要素及びtbody要素についてですが この2つの要素は内部的に margin: 2px; が指定されたような感じになっています。(firebugなどで確認) つまり、上下左右にマージンが2px自動的に入ってます。 もちろん、table要素とtbody要素には、margin及びpadding及びborderは0を設定しています。 このマージンのようなものを取り去りたいのですが margin : 0px;などとしてもこのマージンのようなものを取り去ることは出来ませんでした。（ツールでみると、マージン及びパッディングは０なので当たり前ですが） table要素を使う限り、この2pxというものは自動的に挿入され、CSSでは取り去ることは無理なのでしょうか？ 回避策としては、margin: -2px;で回避することは可能みたいなのですが そもそもどうしても2pxが入ってしまうのか、またそれがなぜCSSで設定出来ないようになっているのか 疑問に思っています。 これは、firefox3.6(firebug) 及び ie8(開発ツール)で確認しました。 分かりにくい説明かもしれませんが宜しくお願いします。
- ベストアンサー
- HTML
- NN使用でのCSSでのBORDERについて
IEで TD.TD1{BORDER-STYLE:SOLID; BORDER-COLOR:CORNFLOWERBLUE; BORDER-WIDTH:1; BACKGROUND-COLOR:ALICEBLUE;} のように指定すれば、細い線で囲まれたものをかくことができますが、NNでは、背景色は有効になっても線が出てきません。 これを有効にするにはどのようにしたらいいのでしょうか？ また、IE・NNで表示結果が違うCSSの一覧などが載ってるような便利なサイトがもしあったら教えてください。
- ベストアンサー
- CSS
- firefoxのHTMLの<table>の設定の仕方
下記のテーブル指定で 「月」と「日」のテーブルの右側のボーダーをcssで border-right: none にしてもfirefoxでは黒色になってしまうので、どなたか わかる人おしえてください <style type="text/css"> <!-- table{ border: none; border-collapse: collapse; margin: 2em auto; } th, td{ padding: 0.3em 1em; border-top: 2px solid #ff6600; border-bottom: 2px solid #ff6600; border-left: none; border-right: none; border-cells: show; } th.right { border-right: 2px solid #ff6600; } td.right1 { border-right: 2px solid #ff6600; } td.right2 { border-right: none; } th.left { border-left: 2px solid #ff6600; } thead{ color: #000000; background: #ffcc99; } form{ display:inline; margine: 0; padding: 0; } --> </style> </head> <body> <form method="POST" action=".jsp"> <table border="1"> <thead> <tr> <th class="left right" colspan="4">予約内容</th> </tr> </thead> <tbody> <tr> <th rowspan="2" class="right left">希望日時</th> <td> <input type="text" name="month" size="3" maxlength="3" />月 </td> <td class="right2"> <input type="text" name="day" size="3" maxlength="3" />日 </td> <td class="right1"></td>>
- ベストアンサー
- HTML
お礼
ありがとうございます。 ＃やっぱり、borderを指定するしかないみたいですね。 ＃ちょっと面倒・・・