こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

記事本文のtableタグのみCSSを適用させる方法

基本的なことだと思うのですがブログ初心者のため質問させてください。

記事に表を入れたいのですが、デフォルトのままですと枠線(border)を最小の1にしても1pxの細い線になりません。そこでネットで調べて以下のものをCSSに追加しました。

table {
border-collapse:collapse;
}
table td{
border:solid 1px;
}

上記をCSSに追加すると表のborderが1本の細い線になりました。しかし記事本文以外のサイドバーやfooterなどのデザインまで影響を与えてしまいました。

そこでタイトルの通り、記事本文のtableタグのみ上記のCSSを適用させるにはどのように記載すればよいでしょうか?



よくわかっていませんが、記事本文を表すHTMLはmain-bodyかmain-containerあたりだと思っています。


使用しているブログサービスはFC2ブログになります。
恐れ入りますが、よろしくお願いします。

投稿日時 - 2016-11-03 05:33:27

QNo.9250906

すぐに回答ほしいです

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

記事本文中のtableタグにclassを付けて、cssもclassを指定するようにすればOK。

投稿日時 - 2016-11-03 10:12:02

補足

早急に回答ありがとうございます。

>tableタグにclassを付けて
例えばHTMLはこういったことでしょうか?
<div class="tabletest">
テーブルコード
</div>

CSSにclassを指定するにはどのように書けば良いのか教えて頂けないでしょうか?
単純に
.tabletest {
border-collapse:collapse;
}
.tabletest td{
border:solid 1px;
}

こうすればよいのでしょうか?

投稿日時 - 2016-11-03 21:29:50

お礼

ありがとうございます!
適用したい表だけ枠線を細くでき、クラスの付け方も覚えることができました。本当にありがとうございます。

投稿日時 - 2016-11-04 12:48:14

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

> こうすればよいのでしょうか?

わざわざdivで囲まなくても構いません。
HTMLは
<table class="tabletest">
<tr>・・・・・・</tr>
</table>
とし、CSSは
table.tabletest {
border-collapse:collapse;
}
table.tabletest td{
border:solid 1px;
}
とすればOKです。

投稿日時 - 2016-11-04 09:37:36

あなたにオススメの質問