WordPressテーマSANGOの質問

SANGOのテーブルでrowspan使用時枠線が消える

アバター
たなべ

SANGOのテーブルでrowspanを指定するとその部分の枠線が消えるのはバグでしょうか?
解決策を教えてください。

以下、rowspan=”5″のところが消えます。

奥行距離
ビル街地区
繁華街地区
普通住宅地区

4m未満
0.80
0.90
0.90

4〜6m
0.92
0.92

6〜8m
0.84
0.95
0.95

8〜10m
0.88
0.97
0.97

10〜12m
0.90
0.99
1.00

12〜14m
0.91
1.00

14〜16m
0.92

16〜20m
0.93

20〜24m
0.94

24〜28m
0.95
0.99

28〜32m
0.96
0.98
0.98

SANGO
SANGO 質問ガイドライン
コメントへの回答
サルワカくん
サルワカくん
2022/02/15

お世話になっております。
すみませんいただいたHTMLですがコメントでは見えないため、こちらでエスケープしていただき再度送っていただけませんでしょうか?
https://saruwakakun.com/tools/html-escape/

よろしくお願いします。

アバター
たなべ
2022/02/15

ご返信ありがとうございます。こちらです。
それと、PC表示でもレスポンシブタグ使おうと思ったのですが、右側に謎の空白ができています。これもどうにかなりませんか?

<table class="tb-responsive">
<tr>
<th>奥行距離</th>
<th>ビル街地区</th>
<th>繁華街地区</th>
<th>あああああああああああ</th>
</tr>
<tr>
<td>4m未満</td>
<td rowspan="2">0.80</td>
<td>0.90</td>
<td>0.90</td>
</tr>
<tr>
<td>4〜6m</td>
<td>0.92</td>
<td>0.92</td>
</tr>
<tr>
<td>6〜8m</td>
<td>0.84</td>
<td>0.95</td>
<td>0.95</td>
</tr>
<tr>
<td>8〜10m</td>
<td>0.88</td>
<td>0.97</td>
<td>0.97</td>
</tr>
<tr>
<td>10〜12m</td>
<td>0.90</td>
<td>0.99</td>
<td rowspan="5">1.00</td>
</tr>
<tr>
<td>12〜14m</td>
<td>0.91</td>
<td rowspan="5">1.00</td>
</tr>
<tr>
<td>14〜16m</td>
<td>0.92</td>
</tr>
<tr>
<td>16〜20m</td>
<td>0.93</td>
</tr>
<tr>
<td>20〜24m</td>
<td>0.94</td>
</tr>
<tr>
<td>24〜28m</td>
<td>0.95</td>
<td>0.99</td>
</tr>
<tr>
<td>28〜32m</td>
<td>0.96</td>
<td>0.98</td>
<td>0.98</td>
</tr>
</table>

サルワカくん
サルワカくん
2022/02/15

お世話になっております。
カスタマイズ→追加CSSに以下のようなCSSを記述ください。


.entry-content td:last-child,.entry-content th:last-child{ border-right: 2px solid #e0e0e0;}

また謎の空白というのはどういったものでしょうか?
よろしくお願いします。

アバター
たなべ
2022/02/21

以下を挿入した時に、右側に意図していない空白のセルが生まれます。
理想は幅にぴったりとテーブルがハマることですが、なぜかPC表示の場合こうなります。
これを消すことはできないでしょうか?

<table class=" tb-responsive">
<thead>
<tr>
<th></th>
<th>無利息期間なし</th>
<th>無利息期間30日</th>
</tr>
</thead>
<tbody>
<tr>
<th>利息総額</th>
<td align="center">14,795円</td>
<td align="center">7,397円</td>
</tr>
</tbody>
</table>

サルワカくん
サルワカくん
2022/02/21

お世話になります。
tb-responsiveのクラスがついているとテーブルをはみ出すほどコンテンツがあることが前提なのではみ出さないテーブルの場合、tb-responsiveクラスを外してみると良さそうです。
いかがでしょうか?
よろしくお願いします。

アバター
たなべ
2022/02/22

ご提案ありがとうございます。
スマホだとはみ出すけれどPCだとはみ出さない、のような感じの場合、どちらもきれいに表示させたいということはSANGOではできない感じですか?

サルワカくん
サルワカくん
2022/02/22

お世話になっております。
ちなみにはみ出さない場合だとどのように表示されていますか?
こちらだと、記事いっぱいにテーブルは表示されませんが見た目的には問題ないように見えます。
空白のセルみたいなのは表示されていなさそうです。

もしよろしければ該当のページのURLを共有いただけないでしょうか?
よろしくお願いします。

アバター
たなべ
2022/02/24

こちら最後の項目になります。
価格表のところです。
https://otaspo.com/rme-fireface-ucx-ii-review/

サルワカくん
サルワカくん
2022/02/25

お世話になっております。
調査したところ、ご自身で子テーマに以下のようなCSSを記述されているようなので削除をお願いします。

/*PCテーブルスクロール*/
.entry-content table.tb-responsive {
/* display: block; */
overflow-x: auto;
width: 100%;
white-space: nowrap;
}

よろしくお願いします。

アバター
たなべ
2022/02/25

指示通りCSSを消したら
今度はPCで枠外にテーブルが飛び出してしまいました。

PCもスマホも横スクロールできるようなものにしたいです。

サルワカくん
サルワカくん
2022/02/25

お世話になっております。
確認しましたが、こちらの環境ではPCで枠外に飛び出すことはありませんでした。
何かSANGOテーマ以外のCSSが影響している可能性があります。
再現するページをご共有いただけないでしょうか?
よろしくお願いします。

アバター
たなべ
2022/03/03

使いやすいと謳っていたのでSANGO買いましたが
ここまでおかしな挙動するテンプレートとは思いませんでした・・・原因がわからなすぎてわけわかんないです。

OGP画像を設定したのになぜ新着記事のものがSNSに出るのですか?

サルワカくん
サルワカくん
2022/03/03

お世話になっております。
いただいたサイトを調べたところ、HTMLにてOGP用のHTMLタグが2箇所で出力されていました。
もしかするとカスタマイズや他のプラグインが影響している可能性が高いです。
ご確認いただけませんでしょうか?
よろしくお願いします。

サルワカくん
サルワカくん
2022/03/03

お世話になっております。
OGP画像はどこで設定されましたか?
また該当ページのURLをいただけませんでしょうか?
よろしくお願いします。

アバター
たなべ
2022/03/03

https://otaspo.com/

テーブルの件、同じSANGOを使っているのに挙動が違うのは訳わからないので、ちょっと最初からやり直します。

なので一番初めから、何をCSSに追加して、どのようなHTMLを書けばPCでもスマホでも横スクロールできるのか、全部送ってください。

よろしくお願いします。

サルワカくん
サルワカくん
2022/03/03

お世話になっております。
以下のCSSを追加していただき、

.table-responsive {
display: block;
overflow-x: auto;
width: 100%;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}

以下のようなHTMLを書いていただくといかがでしょうか?


<div class="table-responsive">
ここにテーブルのHTML
</div>

よろしくお願いします。

アバター
たなべ
2022/03/03

HTMLにてOGP用のHTMLタグが2箇所で出力されていました。
→原因不明。自分で内部をいじった事ない。せいぜい追加CSSのみ。
各プラグインを有効化無効化しても変わらず。

テーブル→スクロールできない。

アイパス渡すのでチェックしてもらっていいですか?その後パス変えるので。

サルワカくん
サルワカくん
2022/03/03

お世話になっております。
OGPについてですが現在ではこの画像が表示されているようです。
https://otaspo.com/wp-content/uploads/2021/12/64226e9c3c802a95a2e8569831b416e2.png
こちら一見正しい画像が表示されていそうに見えます。
もし反映されない場合はFacebookやTwitter側のキャッシュが考えられます。

またパスワードをいただいての調査はSANGOテーマ自体に問題があり調査が必要だとこちらが判断した場合を除いてはできかねます。
現状のスクロールできないテーブルのページを共有いただけないでしょうか?

よろしくお願いします。