Bootstrap表响应式和表头固定，水平滚动

Question

我已经创建了引导表，但是我无法同时创建两个表 反应灵敏且可滚动

对于可滚动的i，固定表的主体高度并减小滚动宽度

我想要的是 如果列数增加，则表格将滚动（就像正常的自举响应一样），即thead和tbody都将滚动
然后垂直滚动将起作用

生成的CSS应该可以在所有设备（例如mac）上运行

th, tr {
    text-align: center;
}

th {
    position: relative !important;
    vertical-align: middle !important;
}

tbody {
    display: flex;
    max-height: 200px;
    overflow-y: scroll;
}

thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    position: relative !important;
    /* even columns width , fix width of table too*/
}

thead {
    width: calc(100% - 1em);/* scrollbar is average 1em/16px width, remove it from thead width */
}

table {
    width: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="table-responsive">
<table class="table table-bordered">
  <thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
    <th>F</th>

    <th>G</th>
    <th>H</th>
    <th>I</th>
    <th>J</th>
    <th>K</th>
    <th>L</th>
    <th>M</th>
    <th>N</th>
    <th>O</th>
    <th>P</th>
  </thead>

  <tr>
    <td> a </td>
    <td> b </td>
    <td> c </td>
    <td> d </td>
    <td> e </td>
    <td> f </td>
    <td> g </td>
    <td> h </td>
    <td> i </td>
    <td> j </td>
    <td>k </td>
    <td> l </td>
    <td>m</td>
    <td> n </td>
    <td>o</td>
    <td> p </td>
  </tr>

</table>

<div>