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で表示されます。

こういう場合はどうすればよいのでしょうか？

回答No.2

MetalKing · ベストアンサー

#content #main table2
　↑　　　↑　　↑
　ID　　　ID　　クラス？

クラスを指定する場合には　クラス名の前にドット（.）が必要です

> と「table」をsccで指定しているので...
というのは、クラスを指定せずに全てのtableに対して　ということになります

ということで、
#content #main .table2　（tableでなくても反映される）
とするか
#content #main table.table2　（tableのみ）
という記述になります

クラスを明示したテーブルは、幅も指定通りになるはずです（ie6ではokでした）。階層の指定も大丈夫みたいです

補足

すごくよくわかります。
ありがとうございます。

#content #main table.table2　（tableのみ）

htmlに書くときは、
<table class="table.table2"></table>
になるんでしょうか？

回答No.4

MetalKing

#content #main table.table2　　と記述した場合も

<table class="table2">
　略
</table>

でいいです。

回答No.3

MetalKing

cssの記述に混乱していたようですね

#content #main table　　はtable要素に対応するルールの指定になります

#content #main .table2　はtable2クラスに対するルールです

#content #main table2 　はtable2要素に対するルールという解釈になりますがhtmlにはtable2っていう要素は規定されていないので無視されてしまうのでしょう

２番目のルールを適用したtableタグを使用する場合
<table class="table2">
　略
</table>
というように、classの属性値とcssで作成したクラス名を一致させる必要があります。そして、属性値にはクラス名だけを記述すればＯＫです

∵ 簡単に言えば、table要素だということはタグを見れば解りますから、二重に指定する必要はないってことです

回答No.1

MetalKing

--- css ---
table.maintable { width:480px; }
table.subtable { width:320px; }

--- html ---
<table class="maintable">
　略
</table>

<table class="subtable">
　略
</table>

ってことをおっしゃってます？

補足

#content #main table {
border-collapse: collapse;
background-color: #FFFFFF;
width: 480px;
margin:0px
padding; border: 0px #000000: 1px;
}

と「table」をsccで指定しているので、別のテーブル幅のものを指定したい時の場合です。

#content #main table2　とかでできるのでしょうか？