テーブルの中身を折り返し表示したい場面って結構遭遇すると思いますが、 その中でも今回はBootstrapで作られたテーブルについてのお話。
問題：折り返し表示が適用されない
Bootstrapでは簡単にテーブルを作ることができて便利なのですが、中身が長くなると折り返したりはみ出したりされずに、その分テーブルの幅も伸びてしまいました。（イメージ画像は割愛）
tr th = User.human_attribute_name(:name) td = @user.name
※こちらslimで書いてます
ユーザーの名前がめちゃくちゃ長いってあんまりないのかもしれないけど、まあ例ということで笑
ググってword-break: keep-all;とか色々試してみたけど、変わらない。 （後できちんと調べてて知ったけど、word-breakってIEが独自に採用してるスタイルなんだ。どうりで今までみたことがなかったわけだ笑）
Bootstrapのデフォルトスタイルで簡単に変えられないかなーと思い、col-xs-とかも試してみたけどうまくいかない。
原因がわかった
折り返されない原因は、table-responsiveによって中のthタグとtdタグに「white-space: nowrap;」が指定されてしまうからだそうです。(参考：http://stackoverflow.com/questions/25916530/keep-column-width-using-responsive-table-bootstrap3)
Bootstrapのレスポンシブなテーブルの列の幅を動的に変える - Qiita
この記事ではCSSを何行か書いて解決しているようですが、あまり仕事上では無双しているCSSファイルをいじりたくないのでw、もっと簡潔にHTMLに直接スタイルを書けるぐらいの修正方法ないかな〜と考えた。
解決：white-space: normal;を指定
Bootstrapのtable-responsiveによって折り返しの禁止がデフォルトで指定されてしまうのであれば、それを解除してあげれば良い。
tr th = User.human_attribute_name(:name) td style="white-space: normal;" = @user.name
折り返し表示をしたくない部分のtdにwhite-space: normal;を指定したところ、無事解決しました。
参考文献
Bootstrapの使い方は以下に詳しく載ってました。 先ほどちょろっと書いたcol-xsとかに関しても丁寧に解説してあるので読む価値あると思います。
初心者にとてもやさしい内容...
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
折り返し表示全般、CSSに関しては以下が詳しくて分かりやすかったです。
