bootstrapでtable内にclassの.table-responsiveを入れた時のカスタマイズ。

通常表示ではテーブルの列幅を固定レイアウトで綺麗に見せて、ブラウザサイズが小さくなったら、スクロールバーがテーブル下に表示される。そんなテーブルにしたいときは別cssで上書きしよう!の最終形です。



これを読まれている方は、Web作成に多少でも心得がある思われますので、bootstrapをcssで上書き、という指定方法は割愛しますね。

bootstrap上書き用cssのソースです

この記事の結論です。上書きするためのスタイルシート「overwrite.css」ファイルの中身です。コピペでどうぞ。

と言いながら、安易なコピペはやめましょう。
内容理解せずにWebの仕事で使うとしたら、コピペ活動の継続は絶対的に損になります。せっかくここまで頑張っているあなたの市場価値が下がるだけです(転職サイトの機能を使うと自分の市場価値を調べることできます→MIIDAS(ミーダス))。「ギクッ」とした方、コピペついでに調べるのも一興です。

話題がそれました。本題に戻ります。bootstrap本体になんでこの機能を追加しないんだろう。テーブル幅を固定利用するってゆーのは、英語圏では標準じゃないんよ。ということなんだろうか・・・。

なにはともあれ、PC画面などではテーブルは固定幅で表示され、スマホなどではテーブルを横スクロールで全体を見ることできるようなデザイン指定ができました。

ここの説明では【bootstrap-3】→→「bootstrap-3.3.7-dist.zip」を使っています。

bootstrap-3では、特に何もしなくても、「.table-responsive」のクラスを付与するだけで、普通にスマホなど画面サイズが小さい場合のテーブル表示は、きちんとスクロールバーが出てくれますのでご安心ください。

この記事は、「固定幅」という上書きをしてしまったおかげで、スマホ表示の時もそのまま引き継がれてしまい、文字へんてこになる。のをなんとかした、というものです。

「overwrite.css」に書いて上書きさせる理由など説明と感じたことを書きます。

bootstrapを普通に使う

最初、HTMLのtableタグに、bootstrapにあるclassの.table-responsiveを書きました。
すると、パソコンのブラウザで見えるところのテーブル幅は、それぞれのセル内にある文字数に応じて、横幅が大きかったり小さかったり。まちまちでした。ブラウザサイズを簡単に教えてくれるサイトあります。


デフォルト時の横幅1280pxの表示です↓テーブルはすぐに出来たけども横幅がまちまち。


デフォルト時の横幅666pxの表示です↓テーブルにスクロールバーあります。




カスタマイズする

このテーブル横幅を全部揃えたいので、スタイルシートで上書きしました。
固定幅のレイアウトに変更してしまうのです!

このソースで上書き。
.table-responsive > table {
table-layout: fixed;
}
※※※※※※ table-layout: fixed;←テーブルの列幅を固定レイアウトにする

 

カスタマイズの失敗に気づく

けども、ブラウザサイズを縮めていくと、767px以下になったときに事件が発生しました。

表の下に「スクロールバー」が出るのだけど、テーブル内の文字が1行になってしまい、ぐっちゃぐちゃに文字がかぶってるのです。
なにこれ?
せっかくいろいろ考えて頑張ったのにやめてくださーい!という泣きそうな惨劇です。


横幅1280pxのときの表示↓大丈夫な感じです。


横幅666pxのときの表示↓全然ダメな感じです。


カスタマイズ失敗の原因を見つける

で、Chromeのデベロッパーツール(ページを表示した状態で、Windowsであれば「F12」。Macであれば「Command+Option+Iキー」を押す)を頼りに、ちまちま調べてみると原因が分かりました。ブラウザの表示幅が小さい時に起きることなのですが、テーブル幅を固定値にカスタマイズしたのに、セル内の文字列は自動改行させない、こんな↓

@media screen and (max-width: 767px) {
–省略–
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;  ←こいつ。
}
※※※※※※ white-space: nowrap;←自動的に改行されません。

記載がbootstrapにあることで、スマホの際は強制的に一行で表示させられている、そんなことが判明しました。

ここまでをまとめると、
①上書きでテーブルを固定幅に変更してみたものの(table-layout: fixed;)、
②スマホ画面サイズでは自動的な折り返しを禁止する指定が標準装備されている(white-space: nowrap;)ため、結果として「セル内にある長い文字列は、隣のセル文字に乗っかって普通にかぶる」です。文字が多ければ多いほど、横へ横へたくさんぐちゃぐちゃかぶります。

カスタマイズの要点が判明して説明できるくらいになる

ということであれば、
以下の1.2だけを上書きしたら良いのです。これで上書き用cssが完成です。

1.パソコンでの表示であれば、
table-layout: fixed;
※テーブルの列幅を固定レイアウトにする

2.ブラウザサイズが767px以下であれば、
table-layout: auto;
※テーブルの列幅を可変レイアウトにする

なお、同じくブラウザサイズが767px以下であれば、
white-space: nowrap;
という先ほどもご紹介したデフォルト記述はそのまま利用します。自動的な折り返しを禁止することでスマホの時はテーブル下にスクロールバーが出てきて欲しいのが理由。

まとめと検証結果

再度まとめると、これで上書きしたらOKです。

検証結果を以下に。


横幅1280pxのときの表示↓大丈夫な感じです。


横幅666pxのときの表示↓大丈夫な感じです。


完成。。。

 

これを調べて考えて検証して、約半日。まったくの独学からでは厳しいものがあります。
これでbootstrap-3で「パソコンではテーブルを固定幅にしたいのだけど、スマホなどでは
スクロールで対応したい」という2つの希望を叶えることができました。

bootstrapをカスタマイズする係の記事があまり見つからなかったので、これまでの雑多なメモ書きなどを元に書き直しました。シンプルに考えれば考えるほどbootstrapは便利なツールですよね。



Bootstrapのように「クラス」を指定するだけで便利に使えるものが他にもあります。

bootstrapのようにclass指定だけでアニメーションできるAnimate.cssの使い方

font awesomeのアイコンフォントの使い方。

おまけ:こんなところまで読み進めて学ぼうとしているあなた、市場価値高いと思う。

こんな記事をここまで読み進めるなんて、つたない文章で申し訳ない気分とともに、感じることありまして、なんかだらだらと書いております。言葉選ばずに。文章的に目線が高い感じが出てくるやもしれませんが、私の熱意が伝わるので、あえてそのままで書き進めます。

 

合理的なファンデーションツールであるbootstrapに目をつけている、それの良いところを使いこなしている。って素晴らしい。

※使いこなしていないとこんなテーブルレスポンシブルまでたどり着きません。ましてや加工なんてしやしませんし、考えもしません。

 

bootstrapという素材の短所があって、それを指摘されると「このツールの限界です」なぞの言い訳をせず、調べている。

※だいたい「ポッと出」の人が良く使う常套文句ですよね。多いのが東京のWebデザイン屋。これまで数回は聞いたことあります。

 

「問題点はだいたいここらへん」「これって多分できるよね」「やってみなくちゃね」と、この記事にたどり着いて、

※こーゆー困ったときに、専門用語満載の言語明瞭意味不明な回答する人に比べて、きちんと要求どおり素朴に行動に移せる人って、実はあまりいないですよね。

 

理解をして使いこなすその姿勢。そして「標準では達成できないことを達成してしまう」。

※この記事をここまで読み進めた、ということは、そう判断できますよね。素敵です。

 

純粋な向上心を持って困難に立ち向かい、ひとりで創意工夫をしながら日々生活している。

日の目を見ないコードを書くという分野で日々純粋に格闘して積み重ねた実務経験と成果物。なんだか何ものにも代え難い経験を日々積み重ねている。スキルは上を見たらキリがない。けども、そんな下支えする世界には興味を示さず、スマホをいじって、SNSやって、人の生活と比べて安心したりの時間を送っている人たちは、圧倒的に多い。

 

同じ時間を使って、無から有を生み出そうとしているあなたがいる。

 

一方で、

 

上司の顔を伺うこと、右から左へ物を動かすこと、会議や打ち合わせすること、プレゼン資料作ること、弱い人に講釈たれることが仕事、と思っている、さほどスペックがよろしくない人種が、なぜか幅を利かせてくる。

 

これらの部類と比べる必要はないわけですが。。。。

ただ、こんな駄記事までも参考にしてコーディングする日々の姿勢、その姿勢の底辺に流れる創意工夫の意識。そんな人の市場価値は絶対に、高い。

 

だけど、自分は、あえて、この仕事をやっている。

 

そう言えるって、粋ですよね。
余談が長くなりました。ここまで読んでくださりありがとうございます。

 

 

【TechClipsエージェント】ITエンジニアのための転職エージェントです。転職サイトって、IT素人が転職アドバイスしてくれます。結構、オイオイってやつですね。けども、ここは普通に現職エンジニアがキャリアアドバイスや技術査定をしてくれちゃいます。要は自分がこれまで培ってきた技術やスキルを「理解して認めてくれる」エージェントの集まり。説明せずともわかってくれるって、嬉しいですよね。

 



関連記事

SNSでもご購読できます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)