1
私のテーブルのヘッダは次のようになります。ブートストラップテーブルの力のすべてのテーブルのヘッダーは1行に表示する
私はヘッダーの一部を複数行にレンダリングされる方法を好きではありません。私はそれらのすべてを一本の線にしたいと思っていますが、どうやってそれを行うのかは分かりません。
また、ノーツヘッダーが非常に多くのテーブル幅を占めているのは嫌です。それにかかる幅をどのように減らすことができますか？
私はtable-responsiveas the w3schools example shows hereを使用しています。
更新：ちょうど長いヘッダの列に複数の列のグリッドスペースを与えて注：（例：col-sm-1またはcol-sm-2を言うこととは対照的にcol-sm-4は）それはあまりにも多くのグリッドスポットを取るための良い解決策ではありません。その後は、残りの列に十分なグリッドスポットが残っていません。
基本的に、私はいつもカラムヘッダーを1行にします。列ヘッダーが1行に収まらない場合は、応答モードに移行して列ヘッダーが1行になるようにします。
ここにコードスニペットがあります。あなたはcol-[viewport]-[size]を使用することができます
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname really really long last name</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at
eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum
nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus.</td>
<td>Pitt</td>
<td>35</td>
<td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at
eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum
nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus.</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
画像と一致していませんが、貼り付けたコードを助けることができるです。コードにメモフィールドはありません。 – aphextwix