CSSの@importから一部のスタイルが読み込めない
- CSSの@importから一部のスタイルが読み込めない問題について
- 外部CSSファイルから特定のスタイルが適用されない問題について
- 外部CSSファイルから適用されないスタイルの原因について
- ベストアンサー
CSSの@importから一部のスタイルが読み込めない・・・。
CSS外部ファイルから、一部のスタイルだけが適応されず困っています。 以下のスタイルをテーブルに適応させたいのです。 【スタイル(index.css)】 table.test{ background-color: #ffcc66; } table.test td{ border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #000000; } 【以下のタグに適応】 <table cellspacing="0" cellpadding="0" class="test"> <tr> <td>AAA</td> </tr> <tr> <td>BBB</td> </tr> <tr> <td>CCC</td> </tr> </table> 【スタイル入力先】index.css 【読み込み方式】<link>によるbase.cssからの@import <link rel="stylesheet" type="text/css" href="css/base.css"> 更に、base.cssから@importでindex.cssを読み込んでいる環境です。 【OS】windowsXP 【ブラウザ】IE6 ******************** 適応されるとテーブルの背景がオレンジ色になり、 テーブルの「AAA」「BBB」「CCC」に点線のアンダーラインが表示されます。 しかし、テーブルの背景はオレンジになるのですが、table.test td{}のスタイルだけ適応されません…。 他のindex.css内にあるタグは正常に読み込まれ適応されています。 （※ちなみに拡張子はPHPです。HTMLではありません） 色々試すと以下の事が判明しました。 □直接タグにスタイルを入力すると全て適応される □<head></head>内にスタイルを入力し、Class指定しても全て適応される □試しに、base.cssに入力するとスタイルが正常に全て適応される ■しかし、index.cssにスタイル入力するとtable.test td{}のみ適応されない なぜ外部CSSファイル(@importからのCSSファイル)から適応されないのでしょうか？ PHPなのが原因だったりもするのでしょうか…。 ご助力お願いします。
- tomohiro2006
- お礼率23% (4/17)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
phpが原因という事はないかと思います。 index.css以外の場所にtdに対するborderの指定があったりすると「詳細度」の関係でindex.cssでの指定が上書きされる可能性があります。 原因を特定せずに試すのも問題ありそうですが index.cssの記述を次のように書き換えて試してみるのもいいかもしれません。 table.test td{ border-bottom-width: 1px !important; border-bottom-style: dashed !important; border-bottom-color: #000000 !important; } http://anslasax.net/css-make/cascade.html
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
table.box と table.test の関係がわからないのでなんとも… 質問のサンプルコードにあわせてtable.testとしましたが実際はtable.boxだったという事でしょうか？ table.test td{ ← 実際はtable.box？？ border-bottom-width: 1px !important; border-bottom-style: dashed !important; border-bottom-color: #000000 !important; }
お礼
記載ミスです。 × table.index td {} ○ table.test td {}
補足
言葉が足りず申し訳ないです。 table.box(base.css内)とtable.test(index.css内)は まったく違うテーブルに対してのスタイルになります。 table.test td{ border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #000000; } ↑のタグが適応されない原因がbase.cssにある table.box td { border-width: 0px; } ↑のborder-width:0px;で表示されなかったようです。 border-width: 0px; を削除するとtable.index td{}のスタイルが適応されます。 やはり優先順位等の問題なのでしょうか？ ちなみに「!important;」をtable.index td{}につけても優先されません…。
関連するQ&A
- CSS @importからのスタイル適応について
CSS外部ファイルからのスタイル適応が出来ず困っています。 以下のスタイルをテーブルに適応させたいのです。 【スタイル(index.css)】 table.test{ background-color: #ffffff; } table.test td{ border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #000000; } 【以下のタグに適応】 <table cellspacing="0" cellpadding="0" class="test"> <tr> <td>AAA</td> </tr> <tr> <td>BBB</td> </tr> <tr> <td>CCC</td> </tr> </table> 【スタイル入力先】index.css 【読み込み方式】<link>によるbase.cssからの@import <link rel="stylesheet" type="text/css" href="css/base.css"> 更に、base.cssから@importでindex.cssを読み込んでいる環境です。 ******************** 適応されるとテーブルの「AAA」「BBB」「CCC」に点線のアンダーラインが表示されます。 しかしindex.cssに入力してもスタイルが適応されないのです…。 （※ちなみに拡張子はPHPです。HTMLではありません） 色々試すと以下の事が判明しました。 □直接タグにスタイルを入力すると適応される □<head></head>内にスタイルを入力し、Class指定しても適応される □試しに、base.cssに入力するとスタイルが正常に適応される ■しかし、index.cssにスタイル入力すると適応されない なぜ外部CSSファイル(@importからのCSSファイル)から適応されないのでしょうか？ PHPなのが原因だったりもするのでしょうか…。 ご助力お願いします。
- 締切済み
- その他([技術者向] コンピューター)
- TRタグの余白をcssで設定するには
TRタグとTRタグの間に余白とつけて表示したいのですが、 CSSでmarginが効かず、paddingはボーダーがTDタグの下に設定してあるので、 文字と線の間が開いてしまいます。 margin-bottomが効けばいいのですが、どうすれば表示することができますか？ <table> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> </table>
- ベストアンサー
- HTML
- テーブルのhrタグに下線を引くためのスタイルシートですがうまくいきません。
テーブルのhrタグに下線を引くためのスタイルシートですがうまくいきません。 なぜでしょうか？ <style="text/csss"> <!-- hr.kasen { border-bottom-style: double; } --> </style> <table> <tr class="kasen"> <td>あ</td> </tr> </table>
- ベストアンサー
- HTML
- CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆
- ベストアンサー
- HTML
- テーブルの幅をデフォルトに戻すcssがわかりま
<html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。
- ベストアンサー
- HTML
- CSS tdのクラスを一部分だけ外したい
Aのテ－ブルが格子状になるようCSSで設定しました。 その中にBのテーブルを入れ、このテーブルは罫線なしで表示したいのですが、 テーブルAのtdの設定がどうやっても消えてくれないので困っています。 ▼試した事 ・テーブルBのクラスをborder-style:none ・テーブルBのクラスに白い罫線を付けてみる ・テーブルBにスタイルでnoder-style:none ▼ソース（簡略） .t-a{ border-top:solid 1px #C4772B; border-right:solid 1px #C4772B;} .t-a td{ border-bottom:1px solid #C4772B; border-left:1px solid #C4772B;} <table class="t-a"> <tr> <td>テーブルA</td> <td>テーブルA</td> </tr> <tr> <td> <table> <tr> <td>テーブルB</td> <td>テーブルB</td> <td>テーブルB</td> </tr> <tr> <td>テーブルB</td> <td>テーブルB</td> <td>テーブルB</td> </tr> </table> </td> </tr> <tr> <td>テーブルA</td> <td>テーブルA</td> </tr> </table> テーブルBのborder-style:noneが反映されなかったので、テーブルBのCSSは削除していまいました。 力を貸してください。
- ベストアンサー
- 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
- thのスタイルを適用するにはどうすればいいでしょう
<table border=1 class="test1"> の部分にclassを設定するだけで thのスタイルを適用するにはどうすればいいでしょうか？ 理想としては添付画像の下のテーブルの様に thの部分だけスタイルを適用したいのですが 実際はテーブルのレコード数が多い為、 <th class="test2">を全てのthにつけるのを省略したいです。 なので、<table border=1 class="test1">の部分にthのスタイルを設定したいのですが table.test1 {font-size: 5em;} の部分はどのように記述すればいいでしょうか？ 現在の table.test1 {font-size: 5em;} だとテーブルすべてに適用されてしまいます。 理想の表示は下のテーブルで 理想のソースは上のテーブルです。 ------------------ 以下ソース <html> <head> <style type="text/css"> table.test1 {font-size: 5em;} th.test2 {font-size: 5em;} </style> </head> <body> <table border=1 class="test1"> <tr><th>No</th><td>a</td></tr> <tr><th>No</th><td>a</td></tr> </table> <br> <table border=1> <tr><th class="test2">No</th><td>a</td></tr> <tr><th class="test2">No</th><td>a</td></tr> </table> </body> </html>
- ベストアンサー
- CSS
- cssで列の幅を調整するには？
たとえば、 <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> このようなcssとコードがある場合、 3列目のｃと３の列の幅を10％にしたい場合、 どのようなコードを書けばいいですか？ td { width: 10%; } こうすると、すべての列が１０％になってしまいます。 指定した列のみのcssで幅を調整する方法を教えてください。 できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。
- ベストアンサー
- 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
補足
ご回答ありがとうございます。 index.cssはbase.cssから@importしています。 base.cssをチェックしたところ「table.box td{border-width: 0px;}」がありました。 これを削除したところ、なんと適応されました＾＾； 最後に質問ですが、base.cssのtable.box td{border-width: 0px;}を消さずに 「!important;」をindex.cssのtable.test td{}に追加しましたが優先されません。 なぜでしょうか・・・。