| カテゴリ | デザイン・CSS・スキン |
|---|
| サマリ | テーブルを横スクロールさせたい |
|---|
| バージョン | 1.5.3 |
|---|
| 投稿者 | タケダ |
|---|
| 状態 | 質問 |
|---|
| 投稿日 | |
|---|
質問箱/5287を参考にpukiwiki.cssのdiv.ie5にoverflow-x:scroll;を書き込んでみましたが横スクロールバーが出てきません。
何かバージョンでの違いや書き込む場所が間違っていたりするのでしょうか？
- wiki開設してから不定期にずっとこれで悩んでるんですよね…。<div id="contents">にdisplay: flexが設定されてるからみたい…？よくわからないです。 -- ぬぺぺ
- 『div.ie5に white-space:nowrap overflow:scrollを書き加えることでスクロールバーが表示されるようになりました』という部分は読んでいないのでしょうか？ -- D
- ただしこれだと私の環境（Windows）では横幅が十分ある状態でも常に表の周りにスクロールバーの枠が表示されるようになりました。
white-space:nowrap overflow:autoだと「常に表の周りにスクロールバーの枠が表示される」ことは無くなりました。
また、行装飾（|||c）でカラムの幅を設定していても無効化されます。
white-space:nowrapを入れないといけないのは、wikiのテンプレートも表も幅可変だからだと思います。
- iOSとAndoroidではこのあたりの扱いが違うという話をどこかで見たので、閲覧環境によっては使わないほうがいいのではないでしょうか。
- 元質問の環境は1.4.7と書いてあります。デフォルトで『<div id="contents">にdisplay: flexが設定されてる』状態になったのは1.5.3からです。それ以前はdivではなくtable構造です。
- ええと、誤解があると良くないので補足しますね。（投稿後に編集で枝をつけます） -- ぬぺぺ
- まず、「wiki開設してから不定期にずっとこれで悩んでるんですよね」の第一返信者は投稿者とは別の人です。一応念のため。
- 投稿者とともに、環境は1.5.3です。第一返信者は1.4時代の仕様は知りません。
- うちの場合、色々と（本当に色々）試したのですが、どんな方法でもブラウザ自体に横スクロールバーが出るという望まない結果になってしまいます。一応テーブル自体にもスクロールバーが出るは出るのですが、bodyタグの範囲それ自体の横幅が広がってしまうのでテーブルのスクロールバーは効かず、ブラウザで横スクロールすることになってしまいます。これは望む結果ではありません。（なお、確認はWindowsのFirefoxです）
- display: flexを解除すると、テーブルのみが横スクロールできる、本来なってほしい挙動になります。が、デザインガタ崩れになるのでちょっと第一返信者にはそこからの手直しは負担が大きくて無理です…。
現象は|||cの横幅指定をしていても無くても結果は同じです。⇒話題と関係ないやつでした- という訳で、うちにはお手上げなのでもし1.5.3の環境下で有効な方法をご存じな方がいらっしゃいましたらご教示願いたいです。切に…。
- 子要素（div#body？）にmin-width: を設定でうまくいかないでしょうか？ --
- div.ie5にscrollを追加した上でテーブル側に改行禁止スタイルを追加してみてください。分からない場合はGoogleで「CSS テーブル 横スクロール」で検索してください。例：th,td{white-space:nowrap} -- 匿名
- たいへん苦労したのですが、自力でなんとかすることができました。投稿後に編集で枝をつけます。 -- ぬぺぺ
- まず、単純に表に横スクロールバーを表示させるには .ie5 に overflow-x: auto を指定した上で、中身に white-space: nowrap を指定するなり横幅指定を width: 70px ではなくて min-width: 70px でやるようにするなりすることで表に横スクロールバーが出てくるようになります。
- が、これだとブラウザ自体にも横スクロールバーが出てきてしまって、微妙に見づらい感じになります。
- （勘違いしてたのですが、ブラウザ自体にまず横スクロールバーが出ますが表自体にも横スクロールバーは出るようになってて、ちょっとだけはみ出る程度だとブラウザの横スクロールバーが最初に出て、一定幅以上になると表に横スクロールバーが出ます）
- ブラウザ自体にスクロールバーが出るのは div#body の横幅が広がってしまうのが原因だったのですが、これは max-width: 98% の指定が div#contents に対しての98%で、メニューバーが考慮されていないのが原因？だったようです。
- 上記の指定に加えて、div#body に対して max-width: calc(100% - 12em) としてメニューバーの分の幅を除くようにすると、（上手に計算できてないのかちょっと前より狭くなりますが）ブラウザ自体には横スクロールバーが出なくなるようにできました。
- なお、メニューバーの出ていない画面については考慮してません…。編集画面とかでdiv#bodyを横幅いっぱいにするのはcssだけじゃダメそう？
- 何時間もかけて色々試した上でこれを書いたあと数分で簡単な解決法がわかりました。激おこ -- ぬぺぺ
- .ie5 {overflow: auto; white-space: nowrap} に加えて div#body {overflow: auto} なりhiddenなりscrollなり指定するとブラウザに横スクロールバーが出なくなります。完。
![[PukiWiki-official]](image/pukiwiki-official.png "[PukiWiki-official]")
