マジレス希望

html CSS 特定テーブルのセルに対して指定したい

解決済

質問者：ppp2122
質問日時：2021/04/01 18:11
回答数：4件

テーブルが複数あり、
特定のテーブルに対し　指定をしたいのです
フォント等は対応できましたが
セルの罫線はわかりませんでした
単にth tdを指定すると、
他テーブルのセルにも線が引かれてしまうので困ります
あと　特定テーブルの1行目と2列目に対し背景色や幅を指定したいのですが
<style>
table.aaa{指定内容}
</style>

<table class="aaa">
<tr><th>あああ</th><th>いいい</th></tr>
<tr><td>ううう</td><td>えええ</td></tr>
</table>

>単にth tdを指定すると、
>他テーブルのセルにも線が引かれてしまうので困ります

aaa.th,aaa,td{
　設定
}
でいけました

補足日時：2021/04/01 18:33
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： bx2
回答日時：2021/04/01 18:46

＞aaa.th,aaa,td{

＞　設定
＞}
＞でいけました

そんな、デタラメに書いてはダメです。

td が有効になっただけです。

書籍で基礎を学んだ方が良いです。

- 0
- 件

通報する

この回答へのお礼

記載間違いです
.aaa th, .aaa td｛設定｝
でした

基礎学びのアドバイスは求めていません

通報する

お礼日時：2021/04/01 18:54

No.4

回答者： gura_
回答日時：2021/04/04 16:07

ppp2122さん

　････特定テーブルの1行目と2列目に対し背景色や幅を指定したい･･･････

ご参考に↓
http://www.tohoho-web.com/css/selector.htm#Struc …

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.aaa {
border-collapse: collapse;
}
.aaa th, .aaa td {
border: 1px #333 solid;
}
.aaa tr:first-child {
height:40px;
background:#fdd;
}
.aaa th:nth-child(2), .aaa td:nth-child(2) {
width:200px;
background:#dfd;
}
.bbb {
border: 1px solid blue;
}
.bbb th, .bbb td {
border: 1px solid red;
}
</style>
</head>
<body>
<table class="aaa">
<tr><th>あああ</th><th>いいい</th></tr>
<tr><td>ううう</td><td>えええ</td></tr>
<tr><td>かかか</td><td>ききき</td></tr>
</table>
<br>
<table class="bbb">
<tr><th></th><th>列-A</th><th>列-B</th></tr>
<tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
<tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
<tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>
</table>
</body>
</html>

- 0
- 件

通報する

No.3

回答者： wanderer1
回答日時：2021/04/02 10:47

たとえばhogehogeで文字の大きさや行間を指定するとして。

ここだけ別の色にしたいというときにfugafugaで色指定だけ付加する。

で、さらにここだけはキャプションだから文字サイズを小さくしたいときにurauraで付加する、といったことをやるんですよ。

色や文字サイズに限らないことなんですが、共通の指定を用意しておいて、部分的に変えるときなどに有効なんです。

とても便利。

同じタイルが並んでいるレイアウトで、一部のタイルだけ背景画像を変えるとかもこれでやってたり。

HTMLとCSSを見て、何が追加されているかがわかりやすい、というメリットもあります。

JavascriptとかPHPを使ったページの作業ではclassの付加／削除／切り替えを使ったりしますが、そんなときに適用されるCSSは全部置き換えより一部置き換えの方がシンプルで、行数が減ります。

一般的にはそういったことを複数のページに渡って支配するわけです。
できる限り行数は減っているほうがGoodなんですよ。

とくにメンテナンス時に有効ですね。
CSS見て「なにこれ？」って悩む時間が減る = コストが減る、です。

まあこれからずっと先になって覚えることかもしれませんが、そういうやり方があるということを知っていると幅がぐっと広がりますね。