wordpressの表の余白の消し方！

SACHI
(@yohei696969)

5年、 1ヶ月前

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

・テンプレート：賢威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;”>３日</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;”>５日</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)

5年、 1ヶ月前

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

トピック投稿者 SACHI
(@yohei696969)

5年、 1ヶ月前

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

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

CG
(@du-bist-der-lenz)

5年、 1ヶ月前

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

5年、 1ヶ月前
こんにちは、

ビジュアルモードで作成した表ですね
```
<table style=”width: 100%;” cellspacing=”1″>
```
を
```
<table style="width:auto;" cellspacing=”1″>
```
にしてあげると、セル幅は小さくなると思います。
トピック投稿者 SACHI
(@yohei696969)

5年、 1ヶ月前

お世話になります。

ご丁寧にありがとうございます。
フォントを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;”>３日</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;”>５日</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>

ishitaka
(@ishitaka)

5年、 1ヶ月前

こんにちは

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

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

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

トピック投稿者 SACHI
(@yohei696969)

5年、 1ヶ月前

nobita様

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

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

トピック投稿者 SACHI
(@yohei696969)

5年、 1ヶ月前

ishitaka様

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

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

munyagu
(@munyagu)

5年、 1ヶ月前

こんにちは

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

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

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

トピック「wordpressの表の余白の消し方！」には新たに返信することはできません。

トピックタグ

表示