VueとBootstrapで横長のテーブルを作ってスクロールさせる。

スポンサーリンク
プログラミング備忘録
横長のテーブルを作って横スクロールさせる

横長のテーブルを作って、かつテーブルの中で改行させたくなかったので簡単に実装しました。

テーブル部分

<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”を指定することで、テーブルの横スクロールを可能にしています。

コメント

タイトルとURLをコピーしました