トピックを立てる前にチェック
- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
通知
すべてクリア
SWELLに関する質問
3
投稿
2
ユーザー
2
Likes
127
表示
Topic starter
対象ページにて、プラグイン「tablepress」を利用して、表を作っています。
こちらを、モバイルでもみやすいように表示をしたく、モバイルの際に横幅を固定して、スクロールできるようにしようと思いました。
そこで、下記URLを参考にTablepressの追加CSSに下記を加えました。
https://ichiri.biz/tech/tablepress-table-width/
table.tablepress {
width: 100%;
table-layout: fixed; /*列幅を指定する時に必要。*/
margin-right: 0;
margin-left: 0;
}
/*表の横スクロール*/
div.myScrollBox {
overflow: scroll;
white-space: nowrap;
}
#tablepress-4 {
width: 1000px !important;
}
そうしたところ、Safariでは正しく表示されるようになりました。
↓Safari（幅狭め、スクロール可能）
↓Safari（幅広め）
ただ、Chrome（Android）では、こちらが反映されず、ブラウザサイズに合わせてサイズが変わってしまいます。
何が原因かわからず、プラグインも関わっているため、もしかしたらこちらへの投稿が適切ではないかもしれませんが、もし解決方法等をご存知の方がいらっしゃれば教えていただければ・・・と思いまして投稿させていただきました。
もしご存知の方がいらっしゃいましたら、お力をお貸しいただければ幸いです。どうぞよろしくお願いいたします。
確認項目
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.8.1
利用中のPHPバージョン
8.2.9
利用中のWordPressバージョン
6.4.2
利用中のサーバー会社
Xserver
ブラウザ
Chrome
利用中のプラグイン一覧
Ad Invalid Click Protector
Akismet Anti-spam
Blocks Animation
Broken Link Checker
Contact Form 7
EWWW Image Optimizer
Pochipp
Search Regex
SEO SIMPLE PACK
Site Kit by Google
TablePress
WP Headers And Footers
WP-Optimize - クリーン、圧縮、キャッシュ
WPvivid Backup Plugin
Yoast Duplicate Post
投稿済 : 03/01/2024 1:43 pm
TablePressの開発者に相談してみるとヒントをいただけるかもしれません。
あとはWP標準のテーブルを使用するか、経験上SWELLと相性良いのはFlexible Table Blockです。
SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。
ご依頼のご相談・お問い合わせ窓口
https://skillshare.biz/inquiry/
投稿済 : 03/01/2024 3:38 pm
keitsuzuki reacted
Topic starter
お答えいただきまして、ありがとうございました。
様々な試行錯誤の結果、無事想定通りの動きをすることができました。
今後の参考のために、一応こちらに解決方法を記載しておきます。
原因
CSSの適用後に「tablepress」のテーブル機能（検索やソートなど）がONになっており、Javascriptでテーブルサイズを上書きしてしまっていた。ただ、「!important」をつけていたため、Safariでは上書きされずに正常な動きをしていた。「!important」をつけていても、ChromeではJavascriptの上書きが優先された。
対処
CSSでテーブルサイズを固定するコードを記載。
その後、指定のエリアをdivタグで上記を適用。
無事にテーブルを左右にスクロールできるようになりました。
あらためまして、お答えいただきありがとうございました。
投稿済 : 03/01/2024 11:52 pm
skillsharejp reacted