ウチの場合の話ねこれ。
表を手っ取り早く記事の中で使いたいと思いまして、はてなブログで|と*を使った表の作り方があるじゃないですか。
|*テスト1|*テスト2| な感じで打ち込んでいくと表になるアレ。
こんな感じに。
| テスト | テスト2 |
|---|
それも面倒になったので、エクセル使おうかと思ったのですが、そういえばGoogleに似たようなのがあったことを思い出して今日初めて使ってみました。
Google スプレッドシート
テストとして小さい表っぽいものを作りました。昔はブログの記事に表示させる時は、これをコピーして別の所で変換して…とかいくつか手順があったようなのですが、今はそのまま記事に貼りつけると表示されるようです。
さっそく表示されない
そのまま貼りつけた場では見えます。結構嬉しかった。
しかし、プレビュー画面だと見えない。言葉おかしいけど、ちゃんと見えない。
ブログの中を色々いじっているせいなのかと思い、別アカウントでテストしても同じ。
テーマを変えてチャレンジ
そこで今度はテーマの何かが干渉でもしているのかと思い、適当にテーマを変えてプレビュー。
今度は表示された。なぜだ。この時点でようやくCSSを覗こうとする（遅い
とりあえずCSSを覗く
その前に一度Googleにてブログで表が表示されない等で検索をかけてみると「表はdisplay:blockじゃダメだ。display:list-itemだ」なんて言われている記事が出てきて、そこで「ああ…displayか…」なんて気付くのですが…下の画像。
table-cell
まあ、この意味を調べるのは後にして、とりあえず今プレビューで表示されているのはdisplay:list-itemではなくdisplay:table-cellだってことは分かった。
表示されないテーマ
最初に表示されなかったテーマに戻して確認してみると、表示されたテーマと少し様子が違う。
こっちはdisplay: tableの上にdisplay:blockが入り込んでいた。試しにこのdisplay:blockを外すとプレビュー上で表が表示された。
記事の中にCSSを追加・編集
HTML編集の中を見ると<style>が既に使われている状態だったので、僕はそこに display: tableを入れた。これで表示しなかった表もプレビューではきちんと表示される。
まとめ
display: tableの件は下記のサイトが分かりやすいと思います。
on-ze.com最後の所でdisplay: tableを入れましたが、display:table-cellにすると画面の幅に表が合わせてくれます。
ただし、display: tableの仕組みがあるので、お時間があればdisplay: tableについて説明しているサイトをご覧ください。
