• ベストアンサー

スタイルシート

スタイルシートでtable全体のスタイルを指定した場合 1つのtableだけインラインで指定しても効果がありません。 たとえば 全体に枠をつけるうようになっても 1個所だけ <table border="0"> にしても枠が付きます。 こうい場合どうしたらよいのでしょうか? tableの指定をなくし、個別で最初から対処すれば よかったのですが、膨大な量でいまさら個別に classを 付けるのは面倒なので。

  • HTML
  • 回答数3
  • ありがとう数2

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

コメントを読んで気がついたので ≫TABLE,TD,TR { background-color: #ffffff; border-collapse: collapse; margin-left: 30px; font-size: 14px; border: solid 1px #666699; } tableには、border-collapse: collapse; はありません。tr,tdにはmargin-left: 30px; はありまん。  無視するように決まってはいますが 【引用】____________ここから 利用者エージェントは,妥当でない特性名又は妥当でない値をもつ宣言を無視しなければならない。すべてのCSS2の特性は,それが受け入れる値に対して,固有の構文上の制限及び意味上の制限をもつ。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2 syntax and basic data types( http://www.y-adagio.com/public/standards/tr_css2/syndata.html#declaration )]より TABLE{background-color: #ffffff; border-collapse: collapse; margin-left: 30px; font-size: 14px; border: solid 1px #666699; } TD,TR {border: solid 1px #666699; } と分けて書く癖をつけましょう。  

kurobon619
質問者

お礼

ORUKA1951さん わかりました。ありがとうございます。

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

 カスケーディングスタイルシート(CSS)には、文字通りカスケードしますから、その優先度を規定する詳細度があります。  <table border="0">の詳細度は、 【引用】____________ここから 6.4.4 非CSSの表示上ヒントの優先 UAは,スタイルシート以外の他のソースからの表示上のヒントを優先することを選択 してもよい。例えば,HTMLのFONT要素又は"align"属性である。 その場合,非CSSの表示上のヒントは,対応する固有性が0に等しいCSS規則に変換され なければならない。規則は,文書作成者のスタイルシートの冒頭に あると仮定され,連続するスタイルシート規則によって上書きされてもよい。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Assigning property values, Cascading, and Inheritance( http://www.y-adagio.com/public/standards/tr_css2/cascade.html#q12 )]より 【引用】____________ここから 6.4.3 選択子の固有性の計算 選択子の固有性の計算を次に示す。 * 選択子のID属性の数を数える。 (= a) * 選択子のその他の属性及び擬似クラスの数を数える。(= b) * 選択子の要素名の数を数える。 (= c) * 擬似要素を無視する。 三つの数a-b-cを基数が大きい数値システムで連結することにより,固有性を提供する。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Assigning property values, Cascading, and Inheritance( http://www.y-adagio.com/public/standards/tr_css2/cascade.html#specificity )]より  よって、 <選択子の要素名の数を数える。> から、スタイルシートに table{} なら値は1. <table border="0">は0ですから・・・ <table style="border-width:0px;"> こうすればよい・・・・・・・・・・・・  それでダメにら、!important 規則もある。 まあ、HTMLを作成するときにきちんとsummary(書くべきとされている)を書いていたり、目的が違うtableは無意識にclassをつけるとかは必要。  今回も、body直下のtableと、<div class="note">内のtableという風に、親要素が違えば、スタイルシートをちょっと手を加えれば、継承の仕組みを使ってすんだことです。(body table{}詳細度(2)とbody div table{}詳細度(3))  なんで、マニュアルを読まずに聞くのかなぁ??? ★特に、この継承や優先順はCSSの【命】なので、プロパティより先に覚えなきゃ・・・。もし詳しく説明されてないなら、その参考書は失格だね。

noname#100277
noname#100277
回答No.1

該当するCSSと、適応されたのと適応されないtable要素全体の記述を示して下さい。 一応CSSは全て出した方が回答は確実なモノに成るでしょう。

kurobon619
質問者

補足

aidesさんありがとうございます。 TABLE,TD,TR { background-color: #ffffff; border-collapse: collapse; margin-left: 30px; font-size: 14px; border: solid 1px #666699; } 外部CSSに上のように記述してあります。 1か所のtableに <table border="0">としてborderを消そうとしましたが、外部CSSが優先されるようです。 最初に書きましたとおりtableの指定をなくし、個別で最初から対処すればよかったのですが、膨大な量でいまさら個別に classを 付けるのは大変な作業なので、何か良い方法はないでしょうか?

関連するQ&A

  • スタイルシートテーブルの罫線を細くしたい

    例えば以下のようにHTMLを書いた場合、 tableとtdのスタイルシート指定により、 外枠と内枠で罫線がかさなり、 若干太くなってしまいます。 細くしたいのですが、どうすれば出来るのでしょうか? <table style="{border:1px solid #000000;border-spacing:0px}"> <tr> <td style="{border:1px solid #000000;padding:0px}">あああ </td> <td style="{border:1px solid #000000;padding:0px}">いいい </td> </tr> </table>

  • スタイルシートで

    スタイルシートでテーブルのTH部分に色をつけたいのですがうまく行きません。 css部分 TH.Color { background-color: #ffa500; font-size: x-small; color: black; font-family:Times New Roman; } これではだめでしょうか? それと、この教えてgooみたいに、テーブルの枠を普通のtable border="1"じゃなくって単線?のようにしたいのですがスタイルシートでどう指定したら良いでしょうか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • スタイルシートでtable位置を指定したい

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

    • ベストアンサー
    • HTML
  • テーブルのhrタグに下線を引くためのスタイルシートですがうまくいきません。

    テーブルのhrタグに下線を引くためのスタイルシートですがうまくいきません。 なぜでしょうか? <style="text/csss"> <!-- hr.kasen { border-bottom-style: double; } --> </style> <table> <tr class="kasen"> <td>あ</td> </tr> </table>

    • ベストアンサー
    • HTML
  • スタイルシートをhead内で定義したい

    下のテーブルのようにしたいんですが、上のテーブルはすきまができています。 このすきまをなくすために、<STYLE>の中を修正してください。 <TABLE>内は変更せずに<STYLE>だけでできるはずです。 <HTML> <HEAD> <STYLE> table.ccc{border:solid;border-color:#bbbbcc} td.ccc{border:solid;border-color:#bbccbb} .ccc th{border:solid;border-color:#ccbbbb} </STYLE> </HEAD> <BODY> <TABLE class="ccc"> <TR class="ccc"> <TH>名前</TH> <TH>住所</TH> </TR> <TR class="ccc"> <TD class="ccc">太郎</TD> <TD class="ccc">東京都新宿区</TD> </TR> <TR class="ccc"> <TD class="ccc">花子</TD> <TD class="ccc">沖縄県那覇市</TD> </TR> </TABLE> <br> <TABLE cellspacing=0 style="border:solid 4px #ddddee"> <TR> <TH style="border:solid 4px #eedddd">名前</TH> <TH style="border:solid 4px #eedddd">住所</TH> </TR> <TR> <TD style="border:solid 4px #ddeedd">太郎</TD> <TD style="border:solid 4px #ddeedd">東京都新宿区</TD> </TR> <TR> <TD style="border:solid 4px #ddeedd">花子</TD> <TD style="border:solid 4px #ddeedd">沖縄県那覇市</TD> </TR> </TABLE> </BODY> </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
  • スタイルシートについて

    <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><IMG src="i1.gif" width="64" height="64" border="0"></TD> <TD><IMG src="i2.gif" width="64" height="64" border="0"></TD> </TR> <TR> <TD><IMG src="m1.gif" width="32" height="32" border="0"></TD> <TD><IMG src="m2.gif" width="32" height="32" border="0"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> こういったTableを使った表がある場合、スタイルシートで示すことは出来ますか?もし出来るならそのソースを教えてください。 また、こういったTableのホームページを一括でスタイルシートに変換できるソフトが存在していたら教えてください。 それと、この行数がかなり大きくなると、Tableよりも軽く表示がされると聞いたのですが本当でしょうか? ご返答、何卒、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • スタイルシートのテーブル枠について

    今までテーブルを利用してホームページに簡単な線を つけていました。これをスタイルシートで行うと 微妙にうまくできません・・・お助けください。 すべてIEで検査しております。 html従来の私の線の引き方 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#000000"> <img src="sps.gif" width="600" height="1"> </td> </tr> </table> 上記の表現をスタイルシートを利用してやりたいのですが 線が1pxのはずが、大きくなってしまいます。 cssを利用した記述 css部分 .index_table{ width: 600px; border:0px; border-width: 0px; margin: 0px; padding: 0px; } html部分 <table class="index_table"> <tr> <td bgcolor="#000000"> <img src="ims/sps.gif" width="600" height="1"> </td> </tr> </table> これに似たいい方法は、ないでしょうか? 質問が、うまくまとまってなくてすみません・・・

    • ベストアンサー
    • HTML
  • スタイルシートを使うとボーダー関連設定の挙動が変わる?

    tableタグには、 bordercolordarkと、bordercolorlightがありますが、 スタイルシートには、border-colorしか指定出来ません。 tableタグでbordercolorを指定すると格子状に全体の枠線に反映されるのに対し、 スタイルシートでtableタグにクラス指定でborder-colorを記述しても、外枠しか反映されません。 この変の挙動の決まりがよく分からないのですが、 どなたかお詳しい方はいらっしゃいませんでしょうか? ちなみに、今実現したいことは、 tableに立体感の無い枠線(影なし1色)を付け、各セルを区切る線も同色で書きたいのです。 外枠だけは少し太めにし、一番上の行は見出し行とし、枠線と同色で塗りつぶすので、その塗りつぶしたセルと枠線との間に溝が出来ないようにしたいのです。 また、文字数制限があるので、極力スタイルシートを利用して、同じコードを書かないようにしたいのです。 ややこしくて恐縮ですが、お知恵をお借りしたくお願い致します。

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

    皆さんはHTMLで表を作成する際、どのように作成していますか? 私はTableタグとスタイルシートを使っているのですが、これをスタイルシートのみで 作成できないでしょうか。 例えば以下のような表で、■部分は他のセルと背景色を変えます。    ■□□    ■□□    ■□□ 通常私がやっている方法は、tableタグに下記スタイル「tb01」を、タイトル部分には 「td.title」を設定を設定しています。 -----------------HTML-------------------------- <table width="100%" border="0" cellspacing="1" cellpadding="0">  <tr>   <td class="title">6月7日</td>   <td>text</td> <td>text</td> <td>text</td>  </tr>  <tr>   <td class="title">6月8日</td>   <td>text</td> <td>text</td> <td>text</td>  </tr> </table> ---------------------------------------------------------- -----------------スタイルシート-------------------------- .tb01 {FONT-SIZE: 12px; border-collapse : collapse ;     border-width : 1px 0 0 1px ; border-style : solid ;     border-color : #CDCDCD ; ; width:350px; background-color:#FFFFFF;     } table.tb01 td {border-width : 0 1px 1px 0 ; border-style : solid ; padding : 7px ;         line-height:120%; border-color : #CDCDCD ; } td.title {background-color:#ECECEC;      } ---------------------------------------------------------- スタイルシートのみでは無理でも、もっと良い方法があれば 是非教えてください。

    • ベストアンサー
    • HTML

専門家に質問してみよう