How can I add a scrollbar to the grid below? It is using a bootstrap table inside a bootstrap col 12 div.
I have attempted to use the following CSS, but it does not apply a scrollbar, it only disrupts the columns.
divgrid.horizontal {
width: 100%;
height: 400px;
overflow: auto;
}
.table {
display: table;
table-layout: fixed;
width: 100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12" id="divgrid">
<table class="table table-striped table-bordered">
<thead class="ui-widget-header">
<tr>
<th v-for="header in columns()">
{{header.displayName }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row,index) in datasourc">
<td v-for="column in columns" class="wrap-break-word" v-show="column.isVisible">
<span v-html="row[column.name]"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>