Table Pressで表を作成すると隙間ができる
- WordPressのTable Pressで表を作成しようとしているのですが隙間ができてしまいうまくいきません。
- カスタムCSSの項目に設定を追加しても、表の隙間が解消されません。
- テーブル名を指定しても効果がなく、初心者には対処法がわかりません。どなたか教えていただけないでしょうか。
- ベストアンサー
Table Pressで表を作成すると隙間ができる
Table Pressで表を作成すると隙間ができる WordPressのTable Pressで表を作成しようとしているのですが隙間ができてしまいうまくいきません。 画像のようになります カスタムCSSの項目には以下のように打ち込みました。 .tablepress tr, .tablepress th, .tablepress td { border: solid 1px gray !important; } .tablepress table { border-collapse: collapse; border-spacing: 0; } 上の方は認識しているようですが、下が認識しません。 テーブル名を指定してもうまくいきませんでした。 テーブル名はとりあえず「1」としてあります。 対処法を教えて下さい。 初心者で記入不十分な所があると思いますが、よろしくお願いします。
- tottocyan
- お礼率94% (17/18)
- インターネットビジネス
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
追加の質問について プラグインのcssはプラグインのフォルダの中に書かれています wp-content/plugins/ の中の各プラグイン名のフォルダ内です しかしこれらのフォルダ内のファイルを直接編集することはお勧めしません プラグインのアップデートを行った場合に 全てのファイルが上書きされてしまい 編集内容が失われてしまうからです
その他の回答 (1)
- H240S18B73
- ベストアンサー率65% (190/288)
そのプラグインを使ったことが無いのでわかりませんが .tablepressってクラス名はもしかしてtableについてるんじゃないでしょうか？ .tablepress table ↓ table.tablepress 数字から始まるclass idは無効です あとfirefoxならfirebugs その他モダンブラウザなら 開発者メニュー・開発ツールなどを有効にして 要素の詳細を表示等すれば cssがどこからどのように適用され どこで上書きされているかなど調査できます firebugsはコーダーには 必須のツールともいえるものなので firefox+firebugsを入れて 調査するクセをつけることをおすすめします
お礼
記述をアドバイス通り入れ替えたらうまくいきました！H240S18B73さん回答ありがとうございます！
補足
Firebugも入れさせて頂きました。追加質問なのですがFirebugで確認したところ、tablepressクラスの記述などがありました。これらはWordPressではどこに書いてあるのでしょうか。「外観」→「テーマ編集」には「style.css」と「style_BizVektor_admin.css」だけしかCSSファイルがなく、その二つのファイルにはそのような記述が無かったように思います。あとPHPファイルばかりなのですが。
関連するQ&A
- css テーブルについて
よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }
- ベストアンサー
- CSS
- htmlできれいな画像のような表を作りたいです。
htmlで添付画像のようなものを作りたいです。 tabelを利用し作りましたが、 セルとセルの間に空白ができてしまい 思い通りのものができませんでした。 このようなものを作る場合何を利用するのが正しいでしょうか？ ↓↓↓tableで作った表↓↓↓ <html> <title>サンプル</title> <head> <body> <style type="text/css"> <!-- .a1 { width:500px; border-collapse:separate; border-spacing:0; } th.a2{ width: 200px; text-align: center; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #330; border-top: 1px solid #330; background-color: #330; color: #fff; } td.a3 { width: 300px; padding: 5px; border-bottom: 2px solid #330; border-top: 2px solid #330; } --> </style> </head> <div class="a1"> <table> <tr> <th class="a2">あああああ</th> <td class="a3">ああああああああああああああ</td> </tr> </table> </div> </body> </html>
- 締切済み
- HTML
- フルCSSプロフェッショナルテンプレの表作成
ビルダー15に同梱のフルCSSプロフェッショナルテンプレートで、まったく別の色の表を作成したいのですが、フルCSSのせいで、背景色が反映されません。 １、まったく別の表のためのCSSはどのように書けばいいのでしょうか？ ２、それをどのように記述すればよいでしょうか？ ３、または、フルCSS”表のデザイン”で選んだ表は、文字が小さく嫌なので、文字を大きく表示する方法はあるのでしょうか？（文章ごとにフォントサイズの変更しなきゃだめ？） ↓↓こんな感じで書いてみたのですが・・・。 CSSコード .example table { width: 640px; border: 1px #ff6347 solid; border-collapse: collapse; } .example td { border: 1px dashed; background-color: #ff6347; padding: 0 6px; } .example th { border: 1px dashed; background-color: #9acd32; } HTMLコード <div class="example"> <table> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> <th>1-4</th> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> </div>
- ベストアンサー
- ホームページ作成ソフト
- ＣＳＳについて 初心者です。
勉強中の身なんですが・・ このように設定した場合文章１と文章２が大きく開く状態になるんですが、なぜでしょうか？ また文章１セルの真ん中に表示され文章２が左にひょうじされるのも分りません・・・・ いろいろ調べてみたんですが中々納得ができなくて・・・ 特にこうういう風にやりたいとかは特になくて、なんでこうなるのかが知りたいのです。 詳しい方説明して頂けるとありがたいです。すみませんがよろしくお願い致しますｍ（。。）ｍ 「ＨＴＭＬ」 <table> <tr> <th>見出し</th> <th></th> <th> </th> <th> </th> </tr> <tr> <td>内容</td> <td> </td> <td> </td> <td></td> </tr> </table> 「ＣＳＳ］ table{ width:250px; border-collapse:collapse; border-width:1px; border-style:solid; border-color:#000000; border-spacing:0; } th{ border-width:1px; border-style:solid; border-color:#000000; } td{ border-width:1px; border-style:solid; }
- ベストアンサー
- HTML
- CSSを使ってテーブルでセル全体をリンクしたい
CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ table#table-01 { width: 600px; border: 0px #E3E3E3 solid; border-collapse: separate; border-spacing: 20px 0; } table#table-01 th { width: 130px; height: 70px; padding: 5px; border: #E3E3E3 solid; border-width: 1px 0 0 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table#table-01 td { vertical-align: top; padding: 1px 3px 20px 0; border: 0px #E3E3E3 solid; border-width: 0; text-align: center; } ＜ｈｔｍｌの方＞ <table id="table-01" cellspacing="20px"> <tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr> <tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr> よろしくお願いします
- ベストアンサー
- HTML
- tableの枠について
よろしくお願いします。前回もtableについて質問をさせていただきましたが、今回は若干内容が違うため新たに質問させていただきました よろしくお願いします。 まず、cssとhtmlに以下の記述をしました。 【css】 table{ border: 2px solid #000000; border-collapse: collapse; width: 750px; margin-left:auto; margin-right:auto; } th.g{ border: 1px solid #000000; text-align: center; padding:10px; font-size: 1.0em; font-weight:bold; width: 750px; color: #0066cc; } 【html】 <table> <tr><th class="g">パソコン</th>tr> 上記の部分をブラウザで見るとwidth: 750px;の設定はしているのですが「パソコン」の文字に出来た枠と、外枠との間に右側ですが隙間が出来てしまいます。margin: autoではと思い、設定をしてみましたが 特別何も変わりません。 どなた様か、ご指導の程よろしくお願いします。
- ベストアンサー
- HTML
- テーブルに関する質問です。
テーブルに関する質問です。 wordpressでHPを作っているのですが、テーブルが思った通りの形にならない為 試しにhtmlドキュメントで同じテーブルを作ろうと試みたのですが やはり同じ現象が起き、思った通りのレイアウトにならないです。 一行目のテーブルと二行目のテーブルはくっつけて、 二行目の列のテーブルのセルとセルの間隔を1px空けてやりたいのですが (1)のwidth:0;の空きセルを作って、それをセルとセルの間に挿入することによって 間隔を空けるという方法は、どうやっても1pxではなく2pxの間隔になってしまい、 (2)の白いborderをセルの右側だけに表示させるという方法では、 Firefoxでは思った通りのレイアウトなのですが、 IE6で見た場合に一行目のセルに線が付きぬけて表示されてしまいます。 色によっては誤魔化かされて付き出てない様に見えるのですが。 どうしたら良いでしょうか？ よろしくお願いします。 (1) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color:#b7a193; width: 300px; height: 30px; padding:0px" colspan="5"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; width: 0px; height: 40px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; height: 40px; width: 0px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> </tbody> </table> </BODY> </HTML> (2) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color: b7a193; width: 300px; height: 30px; padding:0px" colspan="3"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> </tbody> </table> </BODY> </HTML>
- ベストアンサー
- CSS
- 【HTML＆CSS】テーブルの正しい作り方
はじめまして。 Webページで、テーブルを作成する際の正しい手順について迷ってしまっているので、ご助力いただければ幸いです。 現在、XHTML1.0TとCSSでページを作成しています。 テーブルの作成は以前からしていましたが、CSSが絡むようになってから、どの方法がベストなのかがわかりません。 作成はDreamweaverとテキストエディタでの手書きと両方行っています。 疑問を抱いているのは、以下の点です。 ☆ HTMLの<table>に対するborder属性、width属性、cellspacing属性、cellpadding属性は使用するべきなのか？ 今現在は、<table><tr><th><td>のみで骨格を作成し、属性指定は行っておりません。するとすればthのscope属性くらいです。 ボーダーの指定には、table th tdそれぞれにCSSで上下左右のボーダー指定を行い、border-collapseプロパティで、セル間の隙間をなくしています。横幅もCSSのwidthプロパティを使用しています。 セル内の余白については、thやtdに対してpaddingプロパティで指定をしております。 この方法で特に問題なくできてはいるのですが、実際にwidth border cellpadding cellspacingの属性がいまだに非推奨になっていないようですし、ちょっと不安です。 みなさんはどのように作成しているのでしょうか？ Dreamweaverの参考書などでは、tableに対して上と左のボーダー、tdに対して、右と下のボーダーを指定して、border-collapseで隙間をつぶす方法が紹介されていたりもしました。 ただ、自分は、tdの上下左右のボーダーを指定してborder-collapseで隙間をなくしていますが、結果は同じ表記になります。 tableに上と左のボーダー、tdに右と下のボーダーと指定すること自体にはどのような意味があるのでしょうか？ 混乱しているため、少々文章がおかしくなっているかもしれません。 意味が分かりづらい部分がありましたら、補足させていただいたいと思っています。 どうぞよろしくお願いいたします。
- ベストアンサー
- 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
- 特定のテーブルにだけ任意の書式を適用するHTMLかCSS
特定のテーブルにだけ任意の書式を適用するHTMLかCSS 以下のHTMLテーブルで、入れ子テーブル（区画１～区画４）には罫線なし、 外枠（田の字）だけ、1pxの黒い罫線を引くにはどういうのが効率いいですか？ 【解決案１】こうすると、入れ子テーブル（区画１～区画４）まで罫線が現れてしまいます。 table,td,th {border-collapse: collapse; border: 1px solid #000;} 【解決案２】こうすると、該当する全ての<td>タグを<td class="tdstyle">と仕込むのも面倒です。 table {border-collapse: collapse; border: 1px solid #000;} .tdstyle {border: 1px solid #000;} 【解決案３】外枠（田の字）だけ、以下のようにしたいですが、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>区画１</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画２</td></tr></table> </td> </tr> <tr> <td> <table cellpadding=10><tr><td>区画３</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画４</td></tr></table> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
お礼
納得しました。ありがとうございます！