Добавьте полосу прокрутки на сетке таблицы Bootstrap под col 12 div

Question

В сетке ниже, как я могу добавить полосу прокрутки.Он просто использует таблицу начальной загрузки под начальной загрузкой col 12 div.

Я пробовал использовать следующую CSS, но она не применяет полосу прокрутки, она просто запутывает столбцы.

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>

Answer 1

Оберните <table> в <div class="table-responsive">.

Это может сработать, если вы просто поместите этот класс на #divgrid.Если это не так, используйте оболочку, как указано в документах .

Примечание: это также работает на v3 .