前回の記事をUPした際に、試していなかったことがありました。
それは、大きな表を入れてみること。

今回もブログテーマ「Innocent 」で試してみます。
レスポンシブデザインは使っていません。
スマホ用は標準のものです。
大変申し訳ありませんm(__)m
大きな表を入れる可能性のある方は、変更をお願いします。
デザインを確認・変更していく 試行錯誤編
前回紹介したCSS
/* 表 */ table { width: auto; /* 文字に合わせて大きさを自動に */ } .section table caption{ /* タイトル */ font-size: 17px; /* 文字の大きさ */ padding: 0.5px; /* 文字周りの余白 */ } .section table th { /* 見出しセル */ border: 1px solid #000000; /* 線の太さ・種類・色コード */ background: #B0DFFF; /* 背景色 */ text-align: center; /* 中央揃え */ padding: 0.5em; /* 文字周りの余白 */ } .section table td { /* 普通のセル */ border: 1px solid #000000; /* 線の太さ・種類・色コード */ padding: 0.5em; /* 文字周りの余白 */ } /* 表ここまで */
「table」「.section table ○○」でうまくいかない場合は
「table」→「.entry-content table」
「.section table ○○」→「.entry-content table ○○」
に変更してみてください。
大きな表を入れてみる
スマートフォン版


PC版

ひ、ひどい!!(゜ロ゜ノ)ノ
セル側にも幅を設定したらいいのか?
.section table th{~}
.section table td{~}
の中に、
width:auto;
を追加してみる
スマートフォン版、PC版共に上と変わらず。
ダメか……(ーー;)
文字を折り返さないようにしてみよう。
上でwidth:auto;を追加しましたが、
.section table th{~}
.section table td{~}
の中に、更に
white-space:nowrap;
を追加してみる
スマートフォン版


スマホ版はスクロール可能に!
指で表をさわると、スクロールバーが出ました。
いいですね~
PC版



あぁぁぁ!
果てしなく横に!
てことはPC版もスクロールできるようにすればいいわけね。
PC用もスクロールできるようにしてみよう
<CSSに追加>
/* スクロール */ #○○ { box-sizing: border-box; /* スクロール用の箱*/ overflow-x: scroll; /* 横スクロール */ -webkit-overflow-scrolling: touch; border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */ } /* スクロールここまで */
<文中>
表を<div id=○○></div>で挟む。
<div id=○○>
~表~
</div>
一応スマホ版にも入れてみました。
スマートフォン版


PC版


PC版にもスクロールバーが出ました。
良い感じですね!
border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
で右端に線(青矢印のところ)を入れていますが、これは省いても良さそうです。
文が長いところは改行する
文中の改行したい部分に<br />を入れるだけ。
スマートフォン版

PC版

更に良い感じ!
これだな。
CSS 完成編
CSSを貼り付ける場所はこちらの記事で紹介しています。
→文字サイズと行の高さを変更
スクロールを出来るようにするCSS
/* スクロール */ #○○ { box-sizing: border-box; /* スクロール用の箱 */ overflow-x: scroll; /* 横スクロール */ -webkit-overflow-scrolling: touch; border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */ } /* スクロールここまで */
#○○
#○○が<div id=○○>となりますので、他で使っているものと被らないように好きな名前をつけます。
<例>
#demo01 → <div id=demo01>
スマホ版
スマホ版は勝手にスクロールしてくれるので、追加しなくて大丈夫です。
スクロールができる目印として右端に線を入れたい方は、スクロール部分を丸ごと追加してもいいですし、下の省略パターンをご利用ください。
#◯◯の◯◯部分は上で説明したとおり好きな名前をつけて下さい。
#◯◯ { border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */ }
表のCSS
/* 表 */ table { width:auto; /* 大きさを自動に */ } .section table caption{ /* タイトル */ font-size: 17px; /* 文字の大きさ */ padding: 0.5px; /* 文字周りの余白 */ } .section table th { /* 見出しセル */ border: 1px solid #000000; /* 線の太さ・種類・色コード */ background: #B0DFFF; /* 背景色 */ text-align: center; /* 中央揃え */ padding: 0.5em; /* 文字周りの余白 */ width:auto;/* 大きさを自動に */ white-space:nowrap; /* 文字を折り返さない */ } .section table td { /* 普通のセル */ border: 1px solid #000000; /* 線の太さ・種類・色コード */ padding: 0.5em; /* 文字周りの余白 */ width:auto;/* 大きさを自動に */ white-space:nowrap; /* 文字を折り返さない */ } /* 表ここまで */
「table」「.section table ○○」でうまくいかない場合は
「table」→「.entry-content table」
「.section table ○○」→「.entry-content table ○○」
に変更してみてください。
出来上がり
はてな記法
枠内で改行したいところには<br />を入れます。
<文中の例>
スクロールなし
※スマホでご覧になっている方はスクロールしてしまいます。
丘を越え 行こうよ |
口笛ふきつつ | 空は澄み 青空 | 牧場をさして | 歌おう ほがらに | ともに手を取り ランラララ ララララ |
ララララ あひるさん (ガアガア) | ララララ 山羊さんも (メェー) | ララ 歌声合わせよ | 足並み揃えよ | 今日は愉快だ |
---|---|---|---|---|---|---|---|---|---|---|
どんぐり | ころころ | ドンブリコ | お池にはまって | さあ大変 | どじょうが出て来て | 今日は | 坊ちゃん | 一緒に | 遊びましょう |
スクロールあり
<div id=○○>
~表~
</div>
で大丈夫なのですが、「スクロールしてご覧ください。」とか入れると親切かな。
<div id=○○>
スクロールしてご覧ください。
~表~
</div>
丘を越え 行こうよ |
口笛ふきつつ | 空は澄み 青空 | 牧場をさして | 歌おう ほがらに | ともに手を取り ランラララ ララララ |
ララララ あひるさん (ガアガア) | ララララ 山羊さんも (メェー) | ララ 歌声合わせよ | 足並み揃えよ | 今日は愉快だ |
---|---|---|---|---|---|---|---|---|---|---|
どんぐり | ころころ | ドンブリコ | お池にはまって | さあ大変 | どじょうが出て来て | 今日は | 坊ちゃん | 一緒に | 遊びましょう |
HTML
枠内で改行したいところには<br />を入れます。
HTMLは<caption>◯◯</caption>で題名がつけられます。
<文中の例>
<div id=○○>スクロールしてご覧ください。 <table> <caption>犬のおまわりさん</caption> <tr> <th>迷子の</th> <th>迷子の</th> <th>子猫ちゃん</th> <th>あなたの</th> <th>おうちは<br />どこですか</th> <th>おうちを聞いても</th> <th>わからない</th> <th>名前を聞いても</th> <th>わからない</th> </tr> <tr> <td>にゃんにゃんにゃにゃん</td> <td>にゃんにゃんにゃにゃん</td> <td>泣いてばかりいる</td> <td>子猫ちゃん</td> <td>犬の<br />おまわりさん</td> <td>困ってしまって</td> <td>ワンワン ワワン</td> <td>ワンワン ワワン</td> <td></td> </tr> </table> </div>
迷子の | 迷子の | 子猫ちゃん | あなたの | おうちは どこですか |
おうちを聞いても | わからない | 名前を聞いても | わからない |
---|---|---|---|---|---|---|---|---|
にゃんにゃんにゃにゃん | にゃんにゃんにゃにゃん | 泣いてばかりいる | 子猫ちゃん | 犬の おまわりさん |
困ってしまって | ワンワン ワワン | ワンワン ワワン |
スクロールする場合は、<caption></caption>でタイトルをつけた場合、ある程度スクロールしないとタイトルが現れないので、左寄せの方が良いかもしれませんね。(特にスマホでは画面の幅が狭いので、タイトルがなかなか現れません。)
<caption>犬のおまわりさん</caption>
↓
<div align="left">犬のおまわりさん</div>
迷子の | 迷子の | 子猫ちゃん | あなたの | おうちは どこですか |
おうちを聞いても | わからない | 名前を聞いても | わからない |
---|---|---|---|---|---|---|---|---|
にゃんにゃんにゃにゃん | にゃんにゃんにゃにゃん | 泣いてばかりいる | 子猫ちゃん | 犬の おまわりさん |
困ってしまって | ワンワン ワワン | ワンワン ワワン |
もしくは<caption></caption>は使わずに、<div id=○○>の前にタイトルや「スクロールしてご覧ください」を入れたり……。
この辺りはご自分の好みで色々試してみてください。
<今回参考にさせていただいたサイト>
スタイルシート[CSS]/テーブル/セル内で自動改行させない - TAG index
CSSのみでレスポンシブ対応したテーブルデザインを作る3つの方法 | Neganin(ネガニン)
いかがでしょうか。
前回、我ながら良くできたと思っていましたが、まだまだでしたね。
今度こそ良くできたと思います(^_^)v
※続編はこちら