テーブルのスタイルが全体に適用されてしまう問題の解決方法
- クラス内のテーブルのスタイルが全体に適用されてしまう問題が発生しています。外部スタイルシートを使用しているため、適用範囲をクラス内に限定する方法を教えてください。
- maintableクラス内のテーブルのスタイルが全体に適用されてしまう問題が生じています。外部スタイルシートを使用していることで、予期しないスタイルの適用範囲となっています。
- 外部スタイルシートを使用しているため、クラス内のテーブルのスタイルが全体に適用される問題が発生しています。適用範囲をクラス内に限定する方法を教えてください。
- ベストアンサー
クラス内のテーブルが全体に適用される
.maintable TABLE, TD, TH { border: 2px #7d9ba4 dotted; border-collapse: collapse; padding: 5px; } 上記の記述を外部スタイルシートにて適用させているのですが、このテーブルの設定が、全体に適用されて困っています。 maintableクラス内のみの適用になると思っていたのですが、違うのでしょうか？ .maintable LI { list-style-image: url(image/p008_11.gif); } 同じくこのような記述は、maintableクラス内のみにきちんと適用されているので、同じ要領かと思っていたのですが。 私の誤認でしたら、.maintableクラス内にのみ適用できるテーブルのスタイルの記入の仕方を教えていただきたいです。 よろしくお願いいたします。
- tanumotte
- お礼率86% (20/23)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
カンマの区切りは単純に複数のセレクタを書けるだけで、互いの内容に干渉しません。 .maintable TABLE, TD, TH {ＸＸＸ} ↑これは .maintable TABLE {ＸＸＸ} TD {ＸＸＸ} TH {ＸＸＸ} と同等です。 以下のように書くといいでしょう。 .maintable TABLE , .maintable TD , .maintable TH {ＸＸＸ}
関連するQ&A
- cssでtableを指定したい
教えてください。 cssでテーブルを指定しているのですが、別の幅のテーブルを指定したいときはどうすればよいのでしょうか。 現在はこういうふうに書いています。ちょっと汚いですが。。。 ----------------------------- #content #main p{ margin:10px 18px 25px; font-size:12px; } #content #main table { border-collapse: collapse; background-color: #FFFFFF; width: 480px; margin:0px padding; border: 0px #000000: 1px; } #content #main caption{ text-align: right; padding-right: 5px; font-size:12px; } #content #main th { border: #999999 1px solid; font-size:12px; font-weight: normal; background-color: #D8EAFC; padding: 5px; } #content #main td{ border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; font-size:12px; text-align: left; padding: 5px; } ----------------------------- 実際にタグを書くときは、こう書いています。 ----------------------------- <table> <tr> <th>aaaa</th> <td>5555555555555555555555555555</td> </tr> </table> ----------------------------- これをmaintable subtable というふうに幅が違うものにしたいのですが、cssにmaintableを追加して、<table class=maintable">と指定しても、maintableではなく、tableで表示されます。 こういう場合はどうすればよいのでしょうか？
- ベストアンサー
- XML
- 再投稿：テーブルタイトルの幅指定
重要なことが抜けておりましたので、再投稿します。申し訳ありません。 テーブルの<th>の幅指定が上手くいきません。 htmlファイルのstyle部分にｃｓｓを書きこんでいます。 現状 ------ table{ width: 900px; margin:0; padding:0; border-top:#00cc00 2px dotted; border-collapse: collapse; font-family:'メイリオ',"ヒラギノ丸ゴ Pro",sans-serif; } th{ width: 200px; border-bottom:#00cc00 2px dotted; } td{ width: 700px; padding:10px; border-bottom:#00cc00 2px dotted; } （中略） <body> <table> <tr> <th scope="row"> 画像とリンク</th><td>説明</td> </tr> 以下略 ----- ｔｈを左にもってきて、ｔｄと違う幅にしたいわけですが、なぜかthとtdの幅が均等に表示されます。 thに画像を入れておりまして、画像抜きですと幅指定がきちんと反映されます。 しかし画像を入れたバージョンは、画像の幅より余裕をもったth幅となります。謎です。 どうすれば画像を入れたまま、幅指定を反映してもらえるでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- ウィンドウ全体をテーブルで表示するには？
できればウィンドウ全体をテーブルにする方法を教えて欲しいです。 左右上下に余白がなく、ウィンドウの大きさと同じ大きさでテーブルが表示される様にしたいのですが、下記のタグをどうさわっても余白ができてしまいます…。 何処が間違いなのか教えて頂けると有り難いです。 下手ですがイメージもかいてみたので見てみて下さい。 分かり辛い説明で申し訳ありませんが、よろしくお願いします。 【HTML】 <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td>たいとる</td></tr> <tr><td class="menu_td"><ul class="menu">めにゅー</ul></td></tr></table> 【CSS】 body{ background-image:url(＊＊＊); background-repeat: repeat; } .menu_td{ padding-left:20px; height:20px; background-color:#fff; border-top:1px solid #ccc; border-bottom:1px solid #ccc; filter:alpha(opacity=75); -moz-opacity:0.75; } .menu{ margin:0px; padding:0px; list-style-type:none; } .menu li{ width:100px; height:20px; line-height:20px; float:left; } .menu li a{ padding-left:15px; height:20px; line-height:20px; background-image:url(＊＊＊); background-position:0% 50%; background-repeat:no-repeat; display:block; } .menu li a:hover{ background-color:#efefef; } table{ border-collapse: collapse; border: 0px #999999 solid; color: #999999; font-size: 9pt; font-family: Verdana,Osaka,'MS UI Gothic'; } ul{ margin:0px; padding:0px 0px 0px 15px; list-style-type:circle; } よろしくお願いします。
- 締切済み
- CSS
- テーブルに関する質問です。
テーブルに関する質問です。 wordpressでHPを作っているのですが、テーブルが思った通りの形にならない為 試しにhtmlドキュメントで同じテーブルを作ろうと試みたのですが やはり同じ現象が起き、思った通りのレイアウトにならないです。 一行目のテーブルと二行目のテーブルはくっつけて、 二行目の列のテーブルのセルとセルの間隔を1px空けてやりたいのですが (1)のwidth:0;の空きセルを作って、それをセルとセルの間に挿入することによって 間隔を空けるという方法は、どうやっても1pxではなく2pxの間隔になってしまい、 (2)の白いborderをセルの右側だけに表示させるという方法では、 Firefoxでは思った通りのレイアウトなのですが、 IE6で見た場合に一行目のセルに線が付きぬけて表示されてしまいます。 色によっては誤魔化かされて付き出てない様に見えるのですが。 どうしたら良いでしょうか？ よろしくお願いします。 (1) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color:#b7a193; width: 300px; height: 30px; padding:0px" colspan="5"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; width: 0px; height: 40px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; height: 40px; width: 0px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> </tbody> </table> </BODY> </HTML> (2) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color: b7a193; width: 300px; height: 30px; padding:0px" colspan="3"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> </tbody> </table> </BODY> </HTML>
- ベストアンサー
- CSS
- 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
- CSSを使ってテーブルでセル全体をリンクしたい
CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ table#table-01 { width: 600px; border: 0px #E3E3E3 solid; border-collapse: separate; border-spacing: 20px 0; } table#table-01 th { width: 130px; height: 70px; padding: 5px; border: #E3E3E3 solid; border-width: 1px 0 0 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table#table-01 td { vertical-align: top; padding: 1px 3px 20px 0; border: 0px #E3E3E3 solid; border-width: 0; text-align: center; } ＜ｈｔｍｌの方＞ <table id="table-01" cellspacing="20px"> <tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr> <tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr> よろしくお願いします
- ベストアンサー
- HTML
- tableの枠について
よろしくお願いします。前回もtableについて質問をさせていただきましたが、今回は若干内容が違うため新たに質問させていただきました よろしくお願いします。 まず、cssとhtmlに以下の記述をしました。 【css】 table{ border: 2px solid #000000; border-collapse: collapse; width: 750px; margin-left:auto; margin-right:auto; } th.g{ border: 1px solid #000000; text-align: center; padding:10px; font-size: 1.0em; font-weight:bold; width: 750px; color: #0066cc; } 【html】 <table> <tr><th class="g">パソコン</th>tr> 上記の部分をブラウザで見るとwidth: 750px;の設定はしているのですが「パソコン」の文字に出来た枠と、外枠との間に右側ですが隙間が出来てしまいます。margin: autoではと思い、設定をしてみましたが 特別何も変わりません。 どなた様か、ご指導の程よろしくお願いします。
- ベストアンサー
- HTML
- table[summary="table_1"]
table[summary="table_1"] td,th{ padding: 5px 10px; } とスタイルシートで設定した場合、 <table summary="table_2"> のthには、 padding: 5px 10px;は適用されないですよね？ 上記のcssでthタグにpadding: 5px 10px;が出来ようされるのは、 "table_1"だけですよね？
- ベストアンサー
- CSS
- スタイルシートについて
スタイルシートについて質問です。 下記をTableの基本スタイルにしています。 特定のTableのみ、borderカラーを#666666にしたい場合 上記基本スタイルを生かしたままで簡潔なスタイルの設定方法はないでしょうか。 table, td, th {border: 1px solid; border-collapse: collapse} .w550 {border-color: #8AC5D4; width:550px} .w550 td {border-color: #8AC5D4; text-align: center} .w550 th {border-color: #8AC5D4; padding: 5px; padding-left: 10px; color:#2A6D90} いつもスタイルシートの設定が大量になってしまう為、今回はどうにか簡潔で綺麗にしたいので アドバイスいただけると大変助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- 特定のテーブルにだけ任意の書式を適用するHTMLかCSS
特定のテーブルにだけ任意の書式を適用するHTMLかCSS 以下のHTMLテーブルで、入れ子テーブル（区画１～区画４）には罫線なし、 外枠（田の字）だけ、1pxの黒い罫線を引くにはどういうのが効率いいですか？ 【解決案１】こうすると、入れ子テーブル（区画１～区画４）まで罫線が現れてしまいます。 table,td,th {border-collapse: collapse; border: 1px solid #000;} 【解決案２】こうすると、該当する全ての<td>タグを<td class="tdstyle">と仕込むのも面倒です。 table {border-collapse: collapse; border: 1px solid #000;} .tdstyle {border: 1px solid #000;} 【解決案３】外枠（田の字）だけ、以下のようにしたいですが、bordercolorってIEのみ有効なタグですよね？ <table border="1" style="border-collapse: collapse" bordercolor="#111111"> 外枠（田の字）だけに、IDをつけたり識別して、効率よく処理できませんか？ <html> <head> <style TYPE="text/css"> <!-- --> </style> </head> <body> <table cellpadding=10> <tr> <td> <table cellpadding=10><tr><td>区画１</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画２</td></tr></table> </td> </tr> <tr> <td> <table cellpadding=10><tr><td>区画３</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画４</td></tr></table> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
お礼
回答ありがとうございます！！ あまりにも初歩的すぎて回答をもらえないだろうと思ってました。 おかげで解決いたしました。 海外にて、CSSのサイトなどのみを頼りに記述している素人ですので、とっても、とっても助かりました！ そして笑われそうですが、目からうろこでした！