横長のテーブルを作って横スクロールさせる
横長のテーブルを作って、かつテーブルの中で改行させたくなかったので簡単に実装しました。
テーブル部分
<div class="table-responsive">
<table class="table table-bordered text-nowrap">
<thead class="thead-dark">
<tr>
<th v-for="header in headers">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="date in dates">
<td>{{ date.name }}</td>
<td>{{ data.kana }}</td>
<td>{{ data.mail }}</td>
</tr>
</tbody>
</table>
</div>
データは仮に以下のように作成してます。
<script>
export default {
data() {
return {
headers: ['名前','名前カナ','メールアドレス'],
datas: [
{
name: '鈴木',
kana: 'スズキ',
mail: 'sample1@mail.jp'
},
{
name: '田中',
kana: 'タナカ',
mail: 'sample2@mail.jp'
}
]
}
}
</script>
テーブルの中身はv-forで回して表示させています。
指定しているクラスは、<table>に”text-nowrap”を指定することで改行を禁止していて、
<table>を<dive>で囲んであげてその<div>に”table-responsive”を指定することで、テーブルの横スクロールを可能にしています。
コメント