ゴルフ松庵

メンバーライフを満喫しシングルプレーヤーを目指す!ブログ

Bootstrapのテーブルでセル内改行させずに横スクロールを出す方法

      2017/07/27

Bootstrapは、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。

CSSの知識の浅い私でも落ち着いたカッコいいデザインのページを作成出来てとてもありがたいです。
とある業務のWEBアプリの開発に使用しています。

そのWEBアプリで、データ一覧表示でテーブルを使用します。
このとき、項目数が多かったりデータ長が大きかったりする場合にセル内改行をしてしまい、見栄えがイマイチになることがあります。

たとえば以下のような感じになってしまいます。

セル内で改行する

どんなルールでセル内改行されるのかもわかりません。

この例だとメニューはセル内改行OKで、ショートからベンティまでの項目はセル内改行を禁止出来ればよいのだけど、
私の知識と調査能力では実現できませんでした...

スポンサーリンク

全てをセル内改行禁止に

この方法であれば実現方法を見つけたので備忘メモとして残しておきたいと思います。

bootstrap.cssのとある箇所に「white-space: nowrap;」を追記します。

最近ダウンロードしたBootstrapのbootstrap.cssでは2278行目に追加してます。
古かったり時間経過すると(多少の更新があると思われ。)おそらく追加する行目も変わると思うので、追加箇所を特定し易くするために直前のソースも載せます。

 

結果、以下のような表示になります。

セル内で改行しない

セル内改行がされずに、表下に横スクロールバーが表示されるようになります。

実験に使ったHTMLを載せておきます。

 

 - システム開発 ,