表の横スクロールを有効にすると、ヘッダー行固定が無効になる - 不具合報告 https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/ Cocoon ディスカッション掲示板 ja Wed, 22 Apr 2026 09:09:57 +0000 wpForo 60 RE: 表の横スクロールを有効にすると、ヘッダー行固定が無効になる https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80412 Wed, 31 Jul 2024 13:02:41 +0000 ありがとうございます。解決いたしました。

margin-bottom:0;もつけていたのですが、うまくいかず消していました。

再度試してみたら出来たので、何が原因だったのか分かりませんが・・・

お手数をおかけしました。

 

色々ご指導いただきましてありがとうございました。

またよろしくお願いいたします。

]]> 不具合報告 Monica https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80412 RE: 表の横スクロールを有効にすると、ヘッダー行固定が無効になる https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80411 Wed, 31 Jul 2024 12:55:28 +0000 ●原因

追加しているCSSに間違いがあります。

.table-1 ul {
padding-bottom: 0;
}

→→本文余白「行の余白」1.8emに設定。
この為、ブロック間に余白(margin-bottom)が付きます。

●対策

以下に修正します。
Chromeのデベロッパーツールを用いれば、各要素のスタイルを確認できます。
カスタマイズするなら、まずベロッパーツールの使い方を覚えましょう。

.table-1 ul {
padding-bottom: 0;
}

 

]]> 不具合報告 大門未知子 https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80411 RE: 表の横スクロールを有効にすると、ヘッダー行固定が無効になる https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80410 Wed, 31 Jul 2024 12:30:55 +0000 ありがとうございます。

グラデーション非表示できました。

 

それと、表の中でリストタグを使うと、

下に余白ができます。(添付　赤丸)

 

ulやliにpadding-bottom:0;をしても変わりません。(テーブル1)

 

1以上は有効です。

(テーブル2)

 

https://misicca.sakura.ne.jp/wp/table/

 

何度も申し訳ありません。

よろしくお願いします。

]]> 不具合報告 Monica https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80410 RE: 表の横スクロールを有効にすると、ヘッダー行固定が無効になる https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80399 Wed, 31 Jul 2024 01:52:25 +0000

表右側のグラデーションがあったりなかったりするのは、背景色の関係でしょうか？

→→レスポンシブ「横幅の広いテーブルは横スクロール」オン

テーブル幅＞画面幅の時、ScrollHintが色を付けます。
不要なら、CSSを追記します。

.scroll-hint.is-right-scrollable,
.scroll-hint.is-left-scrollable,
.scroll-hint.is-right-scrollable.is-left-scrollable{
background:unset;
}
]]> 不具合報告 大門未知子 https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80399 RE: 表の横スクロールを有効にすると、ヘッダー行固定が無効になる https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80398 Wed, 31 Jul 2024 01:06:15 +0000 表右側のグラデーションがあったりなかったりするのは、

背景色の関係でしょうか？

]]> 不具合報告 Monica https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80398 RE: 表の横スクロールを有効にすると、ヘッダー行固定が無効になる https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80397 Wed, 31 Jul 2024 00:33:52 +0000 わいひら様のおっしゃる通り、どちらか選ばなければいけないようですね。

縦スクロールは諦め、当該操作ありの上で中間にも見出し行を入れました。

https://misicca.sakura.ne.jp/wp/table/

 

CSSなしで列固定と横スクロールができて大変助かります。

ありがとうございました。

 

]]> 不具合報告 Monica https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80397 RE: 表の横スクロールを有効にすると、ヘッダー行固定が無効になる https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80396 Tue, 30 Jul 2024 23:57:55 +0000 皆様ご回答ありがとうございます。

当該操作（表の横スクロールにチェック）をせずにいくつか試してみました。

 

●ご参考

https://note.com/toya_n/n/n2d7497c277b6

縦スクロールバーは表示されましたが、固定されませんでした。

 

 

overflow: visible;にしないとposition: sticky;が効かない

下記記事バリエーション1に「overflow: scroll;を指定した要素で囲めば、その要素内でスクロールしたときにヘッダーが上と左に固定されます。」とありましたが、固定されませんでした。

https://qiita.com/orangain/items/6268b6528ab33b27f8f2

 

 

]]> 不具合報告 Monica https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80396 RE: 表の横スクロールを有効にすると、ヘッダー行固定が無効になる https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80385 Tue, 30 Jul 2024 10:08:59 +0000 ご飯を食べてたら、すでにchu-yaさんが書き込まれていました。

]]> 不具合報告 わいひら https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80385 RE: 表の横スクロールを有効にすると、ヘッダー行固定が無効になる https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80384 Tue, 30 Jul 2024 10:07:18 +0000 今回のケースも場合、.is-scrollable要素のoverflow: auto;をoverflow: visible;にしないとposition: sticky;が効かないみたいですね。けどoverflow: visible;にしちゃうと当然スクロール表示にはならないです。

トレードオフの関係になるのでどちらの操作を優先するかを選ぶ必要があるかと思います。

]]> 不具合報告 わいひら https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80384 RE: 表の横スクロールを有効にすると、ヘッダー行固定が無効になる https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80383 Tue, 30 Jul 2024 09:38:33 +0000 tableのsticky、少し勘違いしていました。申し訳なく。

●原因

言われるように、以下がオンになると、stickyとなりません。

→→レスポンシブテーブル「横幅の広いテーブルは横スクロール」

scroll-hint.min.jsが動作します。

これにより、CSSクラスscrollable-tableが付加され、overflow:visibleでなくなる。
また、インラインスタイルで、overflow:autoとなる。

stickyは親要素含め、overflow:visibleの時、有効となります。
この為、上記設定をオンにすると、1行目がstickyとならない。

●ご参考

https://note.com/toya_n/n/n2d7497c277b6

]]> 不具合報告 大門未知子 https://wp-cocoon.com/community/bugs/%e8%a1%a8%e3%81%ae%e6%a8%aa%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e6%9c%89%e5%8a%b9%e3%81%ab%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e8%a1%8c%e5%9b%ba/#post-80383