あなたの映画力を試せる!POPLETA映画検定(無料) >>

個人でHPをつくっているものなのですが、

外部CSSファイルに

table, td, th {
border: 2px red solid;
}
という記述をすると
すべてのページにあるテーブルに適用されてしまいました。

ある箇所のテーブルなど指定するテーブルのみに記述したい場合はどういったタグにしたらよいのでしょうか?

お詳しい方どうぞよろしくお願いいたします。

A 回答 (3件)

特定の箇所のテーブルタグにclass属性を付けてそれを指定します。


<tr> <td>にもつける必要があるでしょう。(何かいい方法があれば別ですが、)

<table class="ta1">
<tr class="ta1">
<td class="ta1">
とし、

table.ta1, td.ta1, th.ta1 {
border: 2px red solid;
}
と指定してみてください。
    • good
    • 5
この回答へのお礼

できました!

ご親切にどうもありがとうございました!

お礼日時:2008/04/13 20:48

<table class="ta1">


<tr>
<th></th>
<td></td>

class="ta1"をつけたtableの中のth,tdだけに反映すればいいのだから、
th,tdにはclass名不要です。

.ta1, .ta1 th, .ta1 td {
border: 2px red solid;
}
(「.ta1」と「.ta1の中のth」「.ta1の中のtd」だけに反映)
    • good
    • 2

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆


> ある箇所のテーブルなど指定するテーブルのみに記述したい場合はどういったタグにしたらよいのでしょうか?

文書構造によって方法は色々ありますが、一例としてclassもしくはidセレクタを使用します。どちらが相応しいかは文書構造によって判断しなければならないので、ここではclassを使うと仮定します。
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<table class="hoge" summary="サンプル">
<tr>
<th>見出し</th>
<td>データ</td>
</tr>
</table>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
table.hoge {
border-collapse: collapse;
}
table.hoge th,
table.hoge td {
border: 2px red solid;
}
---------------------------------------------------------------------

まずはCSSのシンタックスを覚える事ですね。
    • good
    • 2

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QTRとTDに対するCSS設定方法を教えてください

http://k52.org/syokuzai/c/fish/
↑のようなカレンダーを作りたいと考えております。

ソースよりTABLE内のTRとTDに外部CSSファイルで設定していると
思っているのですが、どのようにすればTDの背景色(紺色)より
大きい幅のTR(要は列)のライン(薄い青色)を付けられるのか
が分かりません。

わかりにくい説明とは思うのですが、どうぞよろしくお願いします。

Aベストアンサー

構造も簡単だしざっとみれば、ある程度想像つくと思いますが・・・

適合するCSSをぬきだすとこんな感じ

<style>
table.cal, tr, td {
padding:4px;
}
tr.fish {
background-color:#F3F6FF;
}
td.mon span {
background-color:#557766;
color:#FFFFFF;
display:block;
}
</style>

<table class="cal">
<tbody>
<tr class="fish">
<td class="mon"><span>1</span></td>
<td class="mon">2</td>
<td class="mon">3</td>
</tr>
<tr>
<td class="mon">4</td>
<td class="mon"><span>5</span></td>
<td class="mon">6</td>
</tr>
<tr class="fish">
<td class="mon">7</td>
<td class="mon">8</td>
<td class="mon"><span>9</span></td>
</tr>
</tbody>
</table>

構造も簡単だしざっとみれば、ある程度想像つくと思いますが・・・

適合するCSSをぬきだすとこんな感じ

<style>
table.cal, tr, td {
padding:4px;
}
tr.fish {
background-color:#F3F6FF;
}
td.mon span {
background-color:#557766;
color:#FFFFFF;
display:block;
}
</style>

<table class="cal">
<tbody>
<tr class="fish">
<td class="mon"><span>1</span></td>
<td class="mon">2</td>
<td class="mon">3</td>
</tr>
<tr>
<td class="mon">4</td>
<td class="mon"><span>5</s...続きを読む

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QCSSの部分リセットについて

サイト全体に影響するCSSでtableのボーダーを非表示に指定しています。
ところが、一部分のみCSS無指定状態のtableを表示する必要が出てしまいました。

該当するtableに別クラスを割り当てて、その部分だけを個別に指定しようと思いましたが、実際見てみると、CSS無指定状態とは微妙に見た目が異なってしまいます。


====CSS内容====
table {
border: 0px none;
}
td {
border: 0px none;
border-collapse: collapse;
}

/*普通にtableを書くとボーダーが消えてしまうので個別に指定*/
.reset table{
border: 3px ridge;
}
.reset td{
border: medium ridge;
border-collapse: collapse;
}

====HTML====
<div class="reset">
<table>
<tr>
<td>ああああああ</td>
<td>ああああああ</td>
</tr>
<tr>
<td>いいいいいい</td>
<td>いいいいいい</td>
</tr>
</table>
</div>


元のtableの指定はサイト全体に影響が出てしまうため、修正することができません。
いまさらながらものすごく後悔していますが・・・。

また、今後の使いまわしを考えると、IDの指定もできません。
無理矢理何とかできないかと思い、上記の方法を取りましたが、やはりうまくいきません。

理想としては、指定した箇所のみCSSの影響がなくなるということですが、いろいろ調べても見つかりませんでした。
根本的に作り直しした方がいいのは理解していますが、何か方法があればと思い質問させていただきました。

どなたか良い案がありましたらお助けください。

サイト全体に影響するCSSでtableのボーダーを非表示に指定しています。
ところが、一部分のみCSS無指定状態のtableを表示する必要が出てしまいました。

該当するtableに別クラスを割り当てて、その部分だけを個別に指定しようと思いましたが、実際見てみると、CSS無指定状態とは微妙に見た目が異なってしまいます。


====CSS内容====
table {
border: 0px none;
}
td {
border: 0px none;
border-collapse: collapse;
}

/*普通にtableを書くとボーダーが消えてしまうので個別に指定*...続きを読む

Aベストアンサー

多分色を完全に CSS 未指定状態と同一にすることは不可能でしょう。
ただ、未指定状態へと可能な限り近づけることならば可能です。

.reset table,td{
border: 3px outset;
}
.reset td{
border:1px inset;
border-collapse: collapse;
}

上記の CSS を指定されたテーブルは、下の HTML に似た表示状態になりました。
(上の CSS を下のテーブルに指定するという意味ではないので注意)
Gecko エンジンを使用したブラウザでは枠線の色が若干違うものとなりましたが、
IE と Opera では未指定状態と同じスタイルで表示されることを確認しました。

<table border="3">
<tr>
<td>ああああああ</td>
<td>ああああああ</td>
</tr>
<tr>
<td>いいいいいい</td>
<td>いいいいいい</td>
</tr>
</table>

Qのclass指定が継承されない

<table>に指定したclass指定が、その下の<td>や<tr>に継承されずに困っています。


HTMLを

<table class="sample">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>

とし、
cssを

table, td {
border: 2px #2b2b2b solid;
}

とした場合、新しくhtmlとcssを作ると表自体と全セルに囲み線が作られます。

ですが、今運営しているHPに記述すると、<table>のborderのみしか表示されません。
試しに、<td>にclassを指定しなおしてみると、そのセルにも囲み線が表示されました。
全<td>にclassを指定すれば問題ないのかもしれませんが、それではあまりにも使い勝手が悪いため、何とかhtmlは<table>のみにclassを指定することで全セルに反映させたいと思っています。

考えられる原因としてはどのようなものがありますでしょうか…?

<table>に指定したclass指定が、その下の<td>や<tr>に継承されずに困っています。


HTMLを

<table class="sample">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>

とし、
cssを

table, td {
border: 2px #2b2b2b solid;
}

とした場合、新しくhtmlとcssを作ると表自体と全セルに囲み線が作られます。

ですが、今運営しているHPに記述すると、<table>のborderのみしか表示されません。
試しに、<td>にclassを指定しなおしてみると、そのセ...続きを読む

Aベストアンサー

>borderが継承されないと言う点は理解しているのですが、<table>に対して指定したclassがその下に位置する<td>に継承されないという点で困っております。
 それは「継承」ではありません。
★それは、tdに指定したスタイルが適用されないという事です。
  カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascading-order )

table.sample td{}
は、
・class属性の空白で仕切られた値リストの一つにsampleを持つtable要素の子孫であるtd要素という意味です。詳細度は[0 0 1 2]=12です。
 これが適用されないと言う事は、
・より高い詳細度の指定がある。
  一意セレクタ[0100]とか、スタイル属性[1000]
  より詳細な記述がある。body div.section table td [0 0 1 4]、
・同じ詳細度で後述の指定がある。
・HTMLの文書構造かセレクタの記述に誤りがある。
 の何れかでしょう。

 Web開発されているなら、開発者ツールが豊富なfirefoxお使いだと思いますがそのアドオンにFirebug( https://addons.mozilla.jp/firefox/details/1843 )があります。それでスタイルが適用されない要素を選択すると、カスケードの順番に従ってスタイルが明示されます。
 それを使うのが、最もよくわかる。

>borderが継承されないと言う点は理解しているのですが、<table>に対して指定したclassがその下に位置する<td>に継承されないという点で困っております。
 それは「継承」ではありません。
★それは、tdに指定したスタイルが適用されないという事です。
  カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascading-order )

table.sample td{}
は、
・class属性の空白で仕切られた値リストの一つにsampleを持つtable要素の子孫であるtd要素という意味です。詳細度は[...続きを読む

QCSSの適用を一部だけ除外したい。

aspサービスのカートのデザインを修正する中で、html側は固定で触れず、
cssのみで修正の必要が有る箇所について困っています。

class="a"のみが付いているdivを消すために、

.a { display:none;} 

としたのですが、こことは別のdivにも class="a b" とaが含まれる形で記述されています。

class に a b 両方ついているdivのみ除外する指定の仕方はありますでしょうか?
:not()を使用して色々行なって見たのですが、思うようにいかないので質問します。

宜しくお願いします。

Aベストアンサー

.aであって.bでないものを選択するには
.a:not(.b)
とできます。

また、クラスがaのみであるものを選択するには
[class="a"]
とすればいいです。

↓にサンプルを示します。
http://jsfiddle.net/u4wes5b5/

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm

Qテーブル内の一部のみ線を変更する方法ってありますか?

いつもお世話になっております。どなたか教えて下さい。
無理なら無理で結構ですので不可能だと回答下さい。

あるテーブル内の一部のみ線を点線にしたり、線幅を細くする方法があれば教えてほしいのですが・・・可能でしょうか?

イメージはエクセルのように一部の罫線だけを変更したいのです。宜しく御願いします。

1つのテーブルで実現不能ならば、複数のテーブルを自由に結合する方法とかないでしょうか?

むちゃくちゃ言って申し訳ありませんが、どなたか救いの手をお願いします。

ちなみにブラウザはIE5.0か6.0だと思います。

Aベストアンサー

スタイルシートを用いることで可能です。
以下の例ではタグに直接style属性を埋め込んでいますが、
先にstyle指定をしておくと楽かもしれません。
<table border="1" bordercolor="black">
<tr>
<td style="border-top-style:dashed;border-left:3px solid red;border-bottom-width:2px;border-right-color:blue;">あああ</td>
</tr>
</table>
詳しくは、スタイルシート、CSSなどで調べてみてください。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング