Bootstrapは、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。
CSSの知識の浅い私でも落ち着いたカッコいいデザインのページを作成出来てとてもありがたいです。
とある業務のWEBアプリの開発に使用しています。
そのWEBアプリで、データ一覧表示でテーブルを使用します。
このとき、項目数が多かったりデータ長が大きかったりする場合にセル内改行をしてしまい、見栄えがイマイチになることがあります。
たとえば以下のような感じになってしまいます。
どんなルールでセル内改行されるのかもわかりません。
この例だとメニューはセル内改行OKで、ショートからベンティまでの項目はセル内改行を禁止出来ればよいのだけど、
私の知識と調査能力では実現できませんでした．．．
全てをセル内改行禁止に
この方法であれば実現方法を見つけたので備忘メモとして残しておきたいと思います。
bootstrap.cssのとある箇所に「white-space: nowrap;」を追記します。
最近ダウンロードしたBootstrapのbootstrap.cssでは2278行目に追加してます。
古かったり時間経過すると（多少の更新があると思われ。）おそらく追加する行目も変わると思うので、追加箇所を特定し易くするために直前のソースも載せます。
table {
background-color: transparent;
}
caption {
padding-top: 8px;
padding-bottom: 8px;
color: #777;
text-align: left;
}
th {
text-align: left;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
white-space: nowrap; ←ここに追記！！
}
結果、以下のような表示になります。
セル内改行がされずに、表下に横スクロールバーが表示されるようになります。
実験に使ったHTMLを載せておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>セル内改行の実験</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<![endif]-->
</head>
<body>
<div class="container">
<h1>セル内改行の実験</h1>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>メニュー</th>
<th>ショート</th>
<th>トール</th>
<th>グランデ</th>
<th>ベンティ</th>
</tr>
<tr>
<td>ベンティアドショットヘーゼルナッツバニラアーモンドキャラメルエキストラホイップキャラメルソースモカソースランバチップチョコレートクリームフラペチーノ</td>
<td>780円</td>
<td>930円</td>
<td>1,080円</td>
<td>1,230円</td>
</tr>
<tr>
<td>コーヒー</td>
<td>300円</td>
<td>400円</td>
<td>500円</td>
<td>600円</td>
</tr>
</table>
</div>
</div>
</body>
</html>