| カテゴリ | デザイン・CSS・スキン |
|---|
| サマリ | テーブルがスマホ側で崩れてしまいます |
|---|
| バージョン | pukiwiki1.4.7 |
|---|
| 投稿者 | ふる |
|---|
| 状態 | 完了 |
|---|
| 投稿日 | |
|---|
現在横長のテーブルを作成しましたが、これをスマホ側で見るとセル内の文字がブラウザサイズに合わせて改行されてしまいます。
overflow-x:scrollを導入してテーブルにスクロール属性をつけようと試みましたが、うまくいかず
どこに記述するべきがわからず困っております。
pukiwiki.css.phpの
.style_table{}内に書き加えてみたり
.style_table {
padding:0px;
border:0px;
margin:auto;
margin-left:0px;
text-align:left;
color:inherit;
background-color:#ccd5dd;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.style_th｛}ないに書き加えても変化がおきず
どこに書き加えれば動作するのかわかりません。
スマホ レイアウト
表が崩れる
pukiwiki overflow-x:
overflow-x: css追加
などで調べても検索ヒットしなかったため質問させていただきます。
- OSやブラウザによって挙動が変わるみたいですけど
wiki.nemusg.com/index.php?Smartphone%2F横スクロール --
- お返事ありがとうございます、index.phpにoverflowを入れてみましたが動作しませんでした。やり方がそもそも間違ってるでしょうか？ -- ふる
- お返事ありがとうございます、index.phpにoverflowを入れてみましたが動作しませんでした。やり方がそもそも間違ってるでしょうか？ -- ふる
- div.ie5にoverflowのcssを追加してみてください。 --
- ありがとうございますdiv.ie5に white-space:nowrap overflow:scrollを書き加えることでスクロールバーが表示されるようになりました -- ふる
- ただ、通常のブラウザでのほかに180wiki-black-smartphoneを導入して使ってみたところ反映されず 同じように180styleのcssのdiv.ie5に書き込んだりしましたが何も変化がおきませんでした。 この場合どこにcssを書き加えればよいでしょうか？ -- ふる
- 「通常のブラウザ」というのが何を指すのか第三者にはわからないので、具体的なOSとブラウザ名を書きましょう。PC用とスマートフォン用でテンプレートを分けたのであればそう書かないと第三者にはわかりません。
180wiki-black-smartphoneには作者への問い合わせコメントフォームが存在し、そちらに似たような書き込みも存在します。
確認に使っている環境すら書いていないので検証のしようがないように思います --
- すみません、伝達不足でした。確認に使っている環境はandroidとiPhone両方のgooglechromeで閲覧したとき、テーブルにスクロールバーを表示させようとしております。 /skin/pukiwiki.css.phpのdiv.ie5内に書き込むことでWindows上のgooglechrome上ではスクロール表示に成功しました。 同じようにでいると思い/skin/180wiki-sp.css内のdive.ie5内にoverflowのcssをいれてみたましたが駄目でした -- ふる
- pukiwikiではなく「div スクロールバー webkit」で検索してみてください。 --
- webkit-overflow-scrolling: touch; overflow-scrolling: touch;などのコードはどこに記述すればよいでしょうか？ これらをdiv.ie5{}ないに書き込んでみましたがスクロールバーの表示や変化がおきませんでした -- ふる
- 伝わっていないみたいなので横から失礼。180wikiのskinを作っているのはそちらのサイトの方なので、pukiwikiの中の方は直接関係ないため、pukiwikiサイトで問い合わせても答えが返ってくる保証はないですよ。180wikiのページで問い合わせたほうが建設的です。 -- [[ 通りすがり]]
![[PukiWiki-official]](image/pukiwiki-official.png "[PukiWiki-official]")
