記事本文のtableタグのCSS適用方法

このQ&Aのポイント
  • 記事本文のtableタグにCSSを適用する方法を解説します。
  • 表のborderを1本の細い線にするためのCSSコードを提供します。
  • FC2ブログの記事本文のtableタグにのみCSSを適用する方法を説明します。
回答を見る
  • ベストアンサー

記事本文の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ブログになります。 恐れ入りますが、よろしくお願いします。

  • HTML
  • 回答数2
  • ありがとう数1

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

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5080/13275)
回答No.1

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

itatwaok
質問者

お礼

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

itatwaok
質問者

補足

早急に回答ありがとうございます。 >tableタグにclassを付けて 例えばHTMLはこういったことでしょうか? <div class="tabletest"> テーブルコード </div> CSSにclassを指定するにはどのように書けば良いのか教えて頂けないでしょうか? 単純に .tabletest { border-collapse:collapse; } .tabletest td{ border:solid 1px; } こうすればよいのでしょうか?

その他の回答 (1)

  • t_ohta
  • ベストアンサー率38% (5080/13275)
回答No.2

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

関連するQ&A

  • CSSの設定方法について

    CSSは外部ファイルにし、十数枚あるHTMLに「div id=contents内にあるTableは全て共通のレイアウト」 となるよう下記のCSSを設定しました。 --------CSS----------------------------------------- #contents{margin-left: 70px;} #contents table{width: 650px; border: solid 1px #B1B2B2; border-collapse: collapse; margin: 15px 0px;} #contents tr, td ,th{padding: 4px; border: solid 1px #B1B2B2; border-collapse: collapse;} --------HTML----------------------------------------- <div id="contents">  <table>   <tr>    <th>項目</th>   </tr>   <tr>    <td>項目1</td>   </tr>  </table> </div> ------------------------------------------------------- しかし、どうしても違うレイアウトにしたいTableが出てきた為、下記CSSを追加、 HTMLは<div id="contents">の部分を<div id="login">に変更したのですが 追加CSSが反映されず、id=contentsの設定が残ったままになってしまいます。 色々いじってみたのですが、どこが間違っているのやら皆目見当がつきません。 --------追加CSS----------------------------------------- #login{text-align: center; } #login table{width: 450px; border: solid 2px #666666; border-collapse: collapse;} #login tr, td ,th{border: solid 1px #666666; border-collapse: collapse;} --------HTML----------------------------------------- <div id="login">  <table>   <tr>    <th>項目</th>   </tr>   <tr>    <td>項目1</td>   </tr>  </table> </div> 拙い文章で恐縮ですが、ご助言いただけると大変助かります。 説明不足や意味不明箇所は補足させていただきますので、どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • 記事の本文だけリストタグの間隔を広くするCSS

    1. 2. 3. や ● ● ● のようなリストタグ同士の間隔を広くしたいのですが、 cssでliにmarginの設定をすると、 ブログのカテゴリもリストタグでできているので、そっちも影響しちゃいますよね。 そこで、記事本文の中のリストタグだけにCSSを適用したくて、 たとえば記事本文を、<div class="kiji"> 本文 </div>で囲んで、 CSSで、 .kiji li { margin: 3em 1em; } としても何も変わらないんです。 どうしたらよいのでしょうか。 よろしくお願いします。

  • 特定のテーブルにだけ任意の書式を適用するHTMLかCSS

    特定のテーブルにだけ任意の書式を適用するHTMLかCSS 以下のHTMLテーブルで、入れ子テーブル(区画1~区画4)には罫線なし、 外枠(田の字)だけ、1pxの黒い罫線を引くにはどういうのが効率いいですか? 【解決案1】こうすると、入れ子テーブル(区画1~区画4)まで罫線が現れてしまいます。 table,td,th {border-collapse: collapse; border: 1px solid #000;} 【解決案2】こうすると、該当する全ての<td>タグを<td class="tdstyle">と仕込むのも面倒です。 table {border-collapse: collapse; border: 1px solid #000;} .tdstyle {border: 1px solid #000;} 【解決案3】外枠(田の字)だけ、以下のようにしたいですが、bordercolorってIEのみ有効なタグですよね? <table border="1" style="border-collapse: collapse" bordercolor="#111111"> 外枠(田の字)だけに、IDをつけたり識別して、効率よく処理できませんか? <html> <head> <style TYPE="text/css"> <!-- --> </style> </head> <body>   <table cellpadding=10>     <tr>       <td>         <table cellpadding=10><tr><td>区画1</td></tr></table>       </td>       <td>         <table cellpadding=10><tr><td>区画2</td></tr></table>       </td>     </tr>     <tr>       <td>         <table cellpadding=10><tr><td>区画3</td></tr></table>       </td>       <td>         <table cellpadding=10><tr><td>区画4</td></tr></table>       </td>     </tr>   </table> </body> </html>

    • ベストアンサー
    • HTML
  • html、CSSを使用。うまくいきません。ソース見てください。

    <html> <head> <style type="text/css"> table { border-collapse:collapse; } .main { border-style:solid; border-color:#33ffff; border-width:0px 7px 0px 7px; } </style> </haed> <body> <table class="main" border=0> <tr><td width="400" bgcolor="red" colspan="2">ああ</td><td></td></tr> <tr><td width="200" bgcolor="green">いい</td> <td width="200" bgcolor="blue">うう</td></tr> </table> </body> </html> このようなソースを作成しました 2段のテーブルで1段目はセルを連結させてあるものです。 その後CSSで両端(背景とテーブルの境界線)に【水色】の線を入れたのですが・・・。 右側だけ、線【水色】とテーブルの白い部分、の間が空いてしまいます。 どぅしたら良いでしょうか? 長々と申し訳ありません。よろしくお願い致します。

  • FC2公式ブログのように、記事本文の文字の下部に縦横の罫線を引くには?

    FC2ブログを利用しています。 下記のFC2公式ブログのように、文中の見出しを目立たせたいと思っています。 FC2総合インフォメーション http://blog.fc2.com/info/ 上記ブログの記事本文中、各話題の見出し部分に ┃___________ ↑こういう感じの、鍵カッコ型・オレンジ色の下線が付いています。(7/20現在) 同ブログより http://blog.fc2.com/info/blog-entry-416.html 「新テンプレートを2種類追加!」の文字下部に付いている下線です。 同じ下線を引きたくて、ブログ記事を書く欄にこのように書いてプレビューしました。 <div style="padding: 4px 0px 2px 4px; border-left: 5px solid #FF9900;border-bottom: 1px solid #FF9900;">ここに見出し</div> 一応似たような感じになりました。 この場合<div></div>と<p></p>のどちらがふさわしいでしょうか? 上記の記述はおかしいですか? また、こういう記述を「ブログテンプレートの編集」(HTML、CSS)ではなく ブログの本文を入力する欄に書くのは間違いでしょうか? (この罫線が画像か文字か何なのかもわからない所からここまでは来ました 上に書きました「FC2総合インフォメーション」のブログテンプレートは 見た目は公式テンプレートの「niziiro」ですが ソースを見たら公式テンプレート「neko_can」でした。 罫線と全く無関係でしたらすみません)

  • mac&winのsafari4.03にてtableタグのmarginの挙動がおかしい件

    htmlとcssは下記です。 tableタグを括っているdivにmarginが適用されていないにも関わらず、 tableの上下の要素にはmarginが適用されています。 どなたか理由がわかる方はいらっしゃるでしょうか。 よろしくお願いいたします。 firefoxだと思ったとおりに動いてくれるのですが。。 ----------------------------- <style> #wrap { background:#F36;} .inner { background:#6CC;} .foot { background:#36F;} table { border-spacing:0; border-collapse:collapse; margin:10px; } td { border:1px #000 solid;} </style> <div id="wrap"> <div class="foot">あああ</div> <div class="inner"> <table> <tr><td>ほげ</td></tr> </table> <!-- ///.inner --></div> <div class="foot">あああ</div> <!-- ///#wrap --></div> -----------------------------

    • ベストアンサー
    • HTML
  • 表の罫線について (印刷)

    行き詰ってしまいましたので、こちらで質問させていただきます。 下記のようなスタイルシートを使用して、表を作成しているのですが、 印刷をすると表の一部の線が消えて出てきません。 印刷の倍率を変えると、消えていた部分が表示され他が消えたりと まちまちです。 /* css ***********************************/ table{   border-collapse:collapse; } table.testTbl td{ border:solid 1px #000; } /* html ***********************************/ <tbale class="testTbl"> <tr> <td height="30" colspan="2">ああああああああああ</td> <td width="220">いいいいいいいい</td> <td>うううううううう</td> </tr> <tr> <td>ああああああああああ</td> <td>いいいいいいいい</td> <td>うううううううう</td>      <td>ええええええええ</td> </tr>         ・         ・         ・         ・        </table> 上記のような感じで表を組んでいるのですが、何か原因はありますでしょうか? print用のcssに table{   border-collapse:separate; } をいれてみたら出るかなと思い、入れたのですが、こちらでも一部が消えてしまいます。 どなたかご教授いただければと思います。 説明がわかりづらく申し訳ありませんが、宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • cssでテーブルで細い線

    スタイルシートを使って 1ピクセルの細い線にしようと、 サンプルのように以下のようにしてみましたが 中の線(td?)が二重になってしまいます 一線にするのにどのようにすればイイですか? ―――――――― .table2 { width: 400px; /* テーブルの横幅 */ border-collapse: collapse; /* 枠線の表示方法 */ border: 1px #1C79C6 solid; /* テーブル全体の枠線(太さ・色・スタイル) */ background-color: #FFFFFF; /* 背景色 */ } .table2 TD { border: 1px #1C79C6 collapse; /* セルの枠線(太さ・色・スタイル) */ } ―――――――――――――― <TABLE CLASS="table2"> <TR> <TD>WebデザインA</TD> <TD>WebデザインB</TD> </TR> <TR> <TD>WebデザインC</TD> <TD>WebデザインD</TD> </TR> </TABLE>

    • ベストアンサー
    • CSS
  • <table>の中の全ての線の表示

    <table>でCSS(下)を使って、枠線ができたのですが、外側だけしか線が出ないのですがCSSのみで内側の線を全て表示することはできるでしょうか? table { border : 1px solid #000000; } 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • 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で表示されます。 こういう場合はどうすればよいのでしょうか?

    • ベストアンサー
    • XML

専門家に質問してみよう