会員サイトをリニューアルしました! 新サイトはこちら

表テーブルを画面幅におさめたい < SWELLに関する質問

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

表テーブルを画面幅におさめたい
 
通知
すべてクリア

表テーブルを画面幅におさめたい

9 投稿
5 ユーザー
1 Likes
1,370 表示
Hiro
 Hiro
(@hirokino)
Eminent Member
Topic starter
 

表テーブルを横にスクロールではなく、画面幅におさまるように自動で調整したいのですができないのでしょうか?

今は変なところで改行されて無理やり画面幅に合わせているようになっています。

 
投稿済 : 25/05/2021 11:29 pm
しらこ
(@96ssbike)
Prominent Member
 

あくまで一例ですが、CSSでこういう風に書くとスマホビューのときにフォントサイズ指定ができますので、色々と良いように工夫してみていただければ幸いです。これで、多少は見やすくなる・・・(かも?)

@media (max-width: 959px) {
.post_content td {
    font-size: 18px;
}
}

にゃーん .

 
投稿済 : 27/05/2021 1:23 am
Hiro
 Hiro
(@hirokino)
Eminent Member
Topic starter
 

@96ssbikeありがとうございます

んー。その都度その都度設定しなきゃいけないものなのでしょうか?

画像ではなく、テーブルタグで表作ってる方たくさんいますがどうされてるのかなと。

ちなみにシラコさんは、テーブルタグを使う時にどうされていますか?

 
投稿済 : 28/05/2021 11:58 am
しらこ
(@96ssbike)
Prominent Member
 

私は基本的に技術記事ですし(リンクは私のプロフィールに貼ってあります)、読み込む場合はPCで読んでいただければ良いので、特に何も工夫もせず放置です。機能にない部分はご自身であれこれやってみてください。

あと、他の方がどうやっているかですが、直接その方のページのHTML・CSSを見に行くとヒントがあるかもしれませんね。

This post was modified 3年前 3回 by しらこ

にゃーん .

 
投稿済 : 28/05/2021 12:04 pm
wbya
 wbya
(@wbya)
Active Member
 

jQueryを利用することになりますが、画面幅に応じてテーブルをtransformプロパティで小さくしているものもありますね。
スマホではピンチアウトして拡大する、という発想だそうです。
サンプルでは、適用したいテーブルに.responsive-tableをつけることでtransformが効くようになっています。

https://necomesi.jp/staff/shimada/responsive-table/

 
投稿済 : 31/05/2021 6:23 am
しらこ reacted
了(開発者)
(@ryo)
Illustrious Member Admin
 

テーブル自体がそもそもスマホと相性悪いので、テーブルを使わずに表現できないかどうかを再検討してみるのも手かと思います。

 
投稿済 : 01/06/2021 12:32 pm
了(開発者)
(@ryo)
Illustrious Member Admin
 

カスタム書式機能でwhite-space:nowrap を適用するものを追加し、それを改行されたくない箇所に適用するといいかもです。(そういう書式をSWELL機能として追加しようかどいか迷っているところなので、今後それようの書式を追加するかもですが。。)

 
投稿済 : 01/06/2021 12:34 pm
genepine
(@genepine)
Eminent Member
 

こんばんは

私はスクロールできます と書いてしまいます。 😋 
https://bit.ly/3ppeIlH

 
投稿済 : 02/06/2021 1:39 pm
しらこ
(@96ssbike)
Prominent Member
 

@genepine さん。今回は、「あくまでもスクロールを使用しない」という前提の話です💦

(詳細は、スレ主さんの投稿を参照してください)

This post was modified 3年前 by しらこ

にゃーん .

 
投稿済 : 02/06/2021 2:29 pm
共有: