- このトピックには3件の返信、2人の参加者があり、最後に
により6年、 2ヶ月前に更新されました。
4件の投稿を表示中 - 1 - 4件目 (全4件中)
-
投稿
-
はじめまして。質問させてください。
表を作成した際に、スマートフォンだと途中で切れてしまうことがあるため横スクロール化を試しています。
以下のことを試したところ、スクロール化はできましたが、表見出しなどの背景色が消えてしまいました。
おそらく<thead>,<tbody>にある<th>のデフォルト色が適用されなくなったのだと思います。
スクロールさせたい場合に何か良い方法はありますでしょうか？
【カスタマイズ内容】
〇htmlへの実装
をテーブルタグを囲む
〇追加CSSへの実装
/*テーブルの横スクロール化 */
table{
width:100%;
}
.scroll{
overflow: auto; /*tableをスクロールさせる*/
white-space: nowrap; /*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{ /*tableにスクロールバーを追加*/
height: 5px;
}
.scroll::-webkit-scrollbar-track{ /*tableにスクロールバーを追加*/}
.scroll::-webkit-scrollbar-thumb { /*tableにスクロールバーを追加*/}
いいねをした人: 居ませんあ！これどこにも書いていなかったかもしれませんが、実は同様のことを行う CSS コンポーネントは実装されています。
下記、一度試してみてください！<div class="c-responsive-table"> <table> 〜 </table> </div>いいねをした人: 居ません
4件の投稿を表示中 - 1 - 4件目 (全4件中)
- トピック「tableの横スクロール化について」には新しい返信をつけることはできません。