How make a table's column which is displayed block be shown like a table which is displayed table?

Question

I am using a Vue.js directive: https://vue-dragscroll.donfalcon.com/ Which makes a block be grabbed with click when it is overflowed.

As I used it in a table, so I should make the table display block. Everything is OK when I have a lot of fields. But when my fields are two or three, all fields will be shown in the left like first one.

I need to have the fields like the second one.

// import { dragscroll } from 'vue-dragscroll'

var app = new Vue({
  el: '#app',
  data() {
    return {
      headers: [
        { name: 'header1', label: 'label1'},
        { name: 'header2', label: 'label2'},
        { name: 'header3', label: 'label3'}
      ],
      values: [
        ['sample11', 'sample12', 'sample13'],
        ['sample21', 'sample22', 'sample23'],
        ['sample31', 'sample32', 'sample33']
      ]
    }
  },
  directives: {
    // dragscroll
  }
})

var app = new Vue({
  el: '#app2',
  data() {
    return {
      headers: [
        { name: 'header1', label: 'label1'},
        { name: 'header2', label: 'label2'},
        { name: 'header3', label: 'label3'}
      ],
      values: [
        ['sample11', 'sample12', 'sample13'],
        ['sample21', 'sample22', 'sample23'],
        ['sample31', 'sample32', 'sample33']
      ]
    }
  },
  directives: {
    // dragscroll
  }
})

div {
  background-color: gray;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>


<div id="app" class="w-100">
  <table
    v-dragscroll.x
    class="d-block w-100 overflow-auto"
  >
    <thead>
      <tr>
        <th v-for="th in headers">{{th.label}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in values">
        <td v-for="value in row">
          {{value}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

<br />
<div id="app2" style="width: 100%;">
  <table
    class="w-100 overflow-auto"
  >
    <thead>
      <tr>
        <th v-for="th in headers">{{th.label}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in values">
        <td v-for="value in row">
          {{value}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

How can I have both together?