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で表示されます。
こういう場合はどうすればよいのでしょうか？
投稿日時 - 2005-02-10 13:35:19
質問者が選んだベストアンサー
#content #main table2
↑ ↑ ↑
ID ID クラス？
クラスを指定する場合には クラス名の前にドット（.）が必要です
> と「table」をsccで指定しているので...
というのは、クラスを指定せずに全てのtableに対して ということになります
ということで、
#content #main .table2 （tableでなくても反映される）
とするか
#content #main table.table2 （tableのみ）
という記述になります
クラスを明示したテーブルは、幅も指定通りになるはずです（ie6ではokでした）。階層の指定も大丈夫みたいです
投稿日時 - 2005-02-12 23:36:42
すごくよくわかります。
ありがとうございます。
#content #main table.table2 （tableのみ）
htmlに書くときは、
<table class="table.table2"></table>
になるんでしょうか？
投稿日時 - 2005-02-13 00:04:55
このQ&Aは役に立ちましたか?
5人が「このQ&Aが役に立った」と投票しています
回答（4）
cssの記述に混乱していたようですね
#content #main table はtable要素に対応するルールの指定になります
#content #main .table2 はtable2クラスに対するルールです
#content #main table2 はtable2要素に対するルールという解釈になりますがhtmlにはtable2っていう要素は規定されていないので無視されてしまうのでしょう
２番目のルールを適用したtableタグを使用する場合
<table class="table2">
略
</table>
というように、classの属性値とcssで作成したクラス名を一致させる必要があります。そして、属性値にはクラス名だけを記述すればＯＫです
∵ 簡単に言えば、table要素だということはタグを見れば解りますから、二重に指定する必要はないってことです
投稿日時 - 2005-02-13 00:17:02
--- css ---
table.maintable { width:480px; }
table.subtable { width:320px; }
--- html ---
<table class="maintable">
略
</table>
<table class="subtable">
略
</table>
ってことをおっしゃってます？
投稿日時 - 2005-02-12 17:54:57
#content #main table {
border-collapse: collapse;
background-color: #FFFFFF;
width: 480px;
margin:0px
padding; border: 0px #000000: 1px;
}
と「table」をsccで指定しているので、別のテーブル幅のものを指定したい時の場合です。
#content #main table2 とかでできるのでしょうか？
投稿日時 - 2005-02-12 23:02:04