サポート » その他 » wordpressの表の余白の消し方!

  • SACHI

    (@yohei696969)


    セルの余白を消してシャープにしたいのですがどのように記述すれば宜しいでしょうか?レスポンシブ対応でスマートにする事が目的です。

    ・テンプレート:賢威7
    ・Mac os最新

    現在のソースは以下の通りなのでアドバイスを頂きたく思います。

    <table style=”width: 100%;” cellspacing=”1″>
    <thead>
    <tr style=”background-color: #0063f7; height: 10px;”>
    <td style=”height: 24px; text-align: center;”><span style=”font-size: 10pt;”><span style=”color: #ffffff;”>日程</span></span></td>
    <td style=”height: 24px; text-align: center;”><span style=”font-size: 10pt;”><span style=”color: #ffffff;”>銘柄</span></span></td>
    <td style=”height: 24px; text-align: center;”><span style=”font-size: 10pt;”><span style=”color: #ffffff;”>内容</span></span></td>
    </tr>
    </thead>
    <tbody>
    <tr style=”height: 15px;”>
    <td style=”height: 24px;”><span style=”font-size: 10pt;”>3日</span></td>
    <td style=”height: 24px;”><span style=”font-size: 10pt;”>みかん</span></td>
    <td style=”height: 24px;”><span style=”font-size: 10pt;”>100%ボーナス →参加方法</span></td>
    </tr>
    <tr style=”height: 15px;”>
    <td style=”height: 24px;”><span style=”font-size: 10pt;”>5日</span></td>
    <td style=”height: 24px;”><span style=”font-size: 10pt;”>リンゴ</span></td>
    <td style=”height: 24px;”><span style=”font-size: 10pt;”>セール開始 →参加方法</span></td>
    </tr>
    <tr style=”height: 24px;”>
    <td style=”height: 24px;”></td>
    <td style=”height: 24px;”></td>
    <td style=”height: 24px;”></td>
    </tr>
    <tr style=”height: 24px;”>
    <td style=”height: 24px;”></td>
    <td style=”height: 24px;”></td>
    <td style=”height: 24px;”></td>
    </tr>
    <tr style=”height: 24px;”>
    <td style=”height: 24px;”></td>
    <td style=”height: 24px;”></td>
    <td style=”height: 24px;”></td>
    </tr>
    <tr style=”height: 24px;”>
    <td style=”height: 24px;”></td>
    <td style=”height: 24px;”></td>
    <td style=”height: 24px;”></td>
    </tr>
    <tr style=”height: 24px;”>
    <td style=”height: 24px;”></td>
    <td style=”height: 24px;”></td>
    <td style=”height: 24px;”></td>
    </tr>
    <tr style=”height: 15px;”>
    <td style=”height: 15px;”></td>
    <td style=”height: 15px;”></td>
    <td style=”height: 15px;”></td>
    </tr>
    </tbody>
    </table>

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • CG

    (@du-bist-der-lenz)

    行は 10px なのに、セルは 24px になっているのは、意図するものは何でしょう。フォントサイズをポイントではなく、24pxで確認しませんか。

    SACHI

    (@yohei696969)

    お返事ありがとうございます。

    すみません。素人なものでして、セル24pxは意図したものではございません。

    CG

    (@du-bist-der-lenz)

    行高が24pxのところに、文字サイズが10ptですから当然天地に差が出ます。1ptは1インチを72分の1したサイズのことで、1pxとは1画素のことでサイズは解像度によって異なります。WindowsやMacOS、モバイルで解像度が異なるので、いずれかに統一するのが好ましい。意図がないことなら指定を解除することで、テーマの仕様に頼るだけになり、それを補正することになります。さて、テーブル・タグで表を作成し、レスポンシブ対策したところで用途次第ではスマートにはいかないケースが有るでしょう。

    こんにちは、

    ビジュアルモードで作成した表ですね

    
    <table style=”width: 100%;” cellspacing=”1″>
    

    
    <table style="width:auto;" cellspacing=”1″>
    

    にしてあげると、セル幅は小さくなると思います。

    SACHI

    (@yohei696969)

    お世話になります。

    ご丁寧にありがとうございます。
    フォントをpxに修正して以下のような記述にしてみました。

    しかし、空欄のところのセルは小さくなりましたが、文字を入れると「セルの余白」が解消されないままです。

    テーマの仕様だと思うのですが「余白を消す方法」はないでしょうか?

    <table style=”width: 100%;” cellspacing=”1″>
    <thead>
    <tr style=”background-color: #0063f7; height: 10px;”>
    <td style=”height: 10px; text-align: center;”><span style=”font-size: 12pt;”><span style=”color: #ffffff;”>日程</span></span></td>
    <td style=”height: 10px; text-align: center;”><span style=”font-size: 12pt;”><span style=”color: #ffffff;”>銘柄</span></span></td>
    <td style=”height: 10px; text-align: center;”><span style=”font-size: 12pt;”><span style=”color: #ffffff;”>内容</span></span></td>
    </tr>
    </thead>
    <tbody>
    <tr style=”height: 10px;”>
    <td style=”height: 10px;”><span style=”font-size: 10pt;”>3日</span></td>
    <td style=”height: 10px;”><span style=”font-size: 10pt;”>みかん</span></td>
    <td style=”height: 10px;”><span style=”font-size: 10pt;”>100%ボーナス →参加方法</span></td>
    </tr>
    <tr style=”height: 10px;”>
    <td style=”height: 10px;”><span style=”font-size: 10pt;”>5日</span></td>
    <td style=”height: 10px;”><span style=”font-size: 10pt;”>リンゴ</span></td>
    <td style=”height: 10px;”><span style=”font-size: 10pt;”>セール開始 →参加方法</span></td>
    </tr>
    <tr style=”height: 10px;”>
    <td style=”height: 10px;”> <span style=”font-size: 10pt;”>6日</span></td>
    <td style=”height: 10px;”> <span style=”font-size: 10pt;”>メロン</span></td>
    <td style=”height: 10px;”> <span style=”font-size: 10pt;”>カバン</span></td>
    </tr>
    <tr style=”height: 10px;”>
    <td style=”height: 10px;”></td>
    <td style=”height: 10px;”></td>
    <td style=”height: 10px;”></td>
    </tr>
    <tr style=”height: 10px;”>
    <td style=”height: 10px;”></td>
    <td style=”height: 10px;”></td>
    <td style=”height: 10px;”></td>
    </tr>
    <tr style=”height: 10px;”>
    <td style=”height: 10px;”></td>
    <td style=”height: 10px;”></td>
    <td style=”height: 10px;”></td>
    </tr>
    </tbody>
    </table>

    こんにちは

    下記のスタイルではどうでしょうか。

    style.css またはカスタマイズの追加 CSS 等に、

    th, td { padding: 0.25em 0.1em; }

    SACHI

    (@yohei696969)

    nobita様

    ご丁寧にありがとうございます。

    <table style=”width:auto;” cellspacing=”1″>
    に切り替えてみましたが、文字を入れるとやはり「セルの余白」は消えません・・・

    SACHI

    (@yohei696969)

    ishitaka様

    ご提案ありがとうございます。

    賢威7のテンプレートなのでbaseの最末尾に
    th, td { padding: 0.25em 0.1em; }
    を挿入してみましたが、変わらずです・・・。

    こんにちは

    実際のサイトを見てみないとわかりませんね。
    「セルの余白」って何なんでしょうか?
    どういう状態を解消したいのか、よく分かりません。

    でも、英語にすると「cell space」で、cellspacingが悪いんじゃないでしょうか。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「wordpressの表の余白の消し方!」には新たに返信することはできません。