bootstrap-vue.jsの<b-table>で横幅を広げたい

Question

#状況
公式サイトを見ながら、テーブルをつくりデータを表示させることができました
jsonデータを非同期で取得して以下の記述でHTMLのテーブルのように展開させてます

<b-table striped hover :items="jsonData" :fields="fields"></b-table>

export default {
  data() {
    return {
      error: null,
      fixed: false,
      fields: [
          {
            key: 'user',
            label: 'ユーザ名',
            sortable: true
          },
          {
            key: 'status',
            label: '利用状況',
            sortable: true,
          },
          {
            key: 'mail',
            label: 'メールアドレス',
            sortable: true,
          },
        ],
      jsonData: []
    }
  }

■公式サイト
https://bootstrap-vue.js.org/docs/components/table

#やりたいこと
それぞれ、「ユーザ名」「利用状況」、「メールアドレス」ごとに横幅を指定させる方法ってないのでしょうか

とくにメールアドレスが文字数が多いため、縦文字になってしまってます

Answer 1

自己解決しました。

#①b-tableにresponsiveを追加し、横長のテーブルをスクロールできるようにする

<b-table 
      hover
      responsive
      :items="jsondata" 
      :fields="fields">
    </b-table>

#②CSSに　「padding-right: 10em;」を追加し、列の幅を大きくする。

table.b-table > thead > tr > th.sorting, table.b-table > tfoot > tr > th.sorting {
    padding-right: 10em;
    white-space: nowrap;
    cursor: pointer;
}