JSFiddle - React, Tailwind, and code Playground

by Eric L

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id='app'>
  <h3> Table with scrollable body</h3>
  <b-table :items="items" small class="my-table-scroll" />
</div>

CSS

body {
  padding: 1rem;
}

table.my-table-scroll,
table.my-table-scroll>thead,
table.my-table-scroll>tbody,
table.my-table-scroll>tfoot,
table.my-table-scroll>tbody>tr,
table.my-table-scroll>thead>tr {
  width: 100%;
  display: block;
}

table.my-table-scroll>thead,
table.my-table-scroll>tbody,
table.my-table-scroll>tfoot {
  display: block;
  width: 100%;
  overflow-y: scroll;
}

table.my-table-scroll>thead,
table.my-table-scroll>tfoot {
  height: auto;
}

table.my-table-scroll>tbody {
  max-height: 135px;
}

table.my-table-scroll>thead>tr>th,
table.my-table-scroll>thead>tr>td,
table.my-table-scroll>tbody>tr>th,
table.my-table-scroll>tbody>tr>td,
table.my-table-scroll>tfoot>tr>th,
table.my-table-scroll>tfoot>tr>td {
  display: inline-block;
  width: 25%;
}

JavaScript

window.onload = function() {
  new Vue({
    el: '#app',

    data() {
      return {
        items: [{
            isActive: true,
            age: 40,
            first_name: 'Dickerson',
            last_name: 'Macdonald'
          },
          {
            isActive: false,
            age: 21,
            first_name: 'Larsen',
            last_name: 'Shaw'
          },
          {
            isActive: false,
            age: 89,
            first_name: 'Geneva',
            last_name: 'Wilson'
          },
          {
            isActive: true,
            age: 38,
            first_name: 'Jami',
            last_name: 'Carney'
          },
          {
            isActive: true,
            age: 40,
            first_name: 'Dickerson',
            last_name: 'Macdonald'
          },
          {
            isActive: false,
            age: 21,
            first_name: 'Larsen',
            last_name: 'Shaw'
          },
          {
            isActive: false,
            age: 89,
            first_name: 'Geneva',
            last_name: 'Wilson'
          },
          {
            isActive: true,
            age: 38,
            first_name: 'Jami',
            last_name: 'Carney'
          }
        ]
      }
    }
  })
}