HTML、CSS : Make table vertically scrollable

Question

我有一个在 AJAX 请求后动态创建的表(使用 vue.js)。计算列数和每列的宽度。

我的问题是，当表格中没有足够的空间时应该有一个垂直滚动条，但即使设置 style="width: 600px; overflow-x: scroll" 也没有滚动条显示向上，标题元素一起缩小到包装器 div 的宽度，表格行被剪裁。

这是我的相关代码(使用 bootstrap 和 vue.js 2):

    <div class="panel-body" id="datatable">
        <table class="table data-table" id="datatable-content">
            <thead class="datatable-head" id="datatable-head">
                <tr>
                    <th v-for="value in tableHeader" v-text="value"></th>
                </tr>
            </thead>

            <tbody class="datatable-body" id="datatable-body">
                <tr v-for="row in tableRows">
                    <td v-for="key in tableHeader" v-html="highlightFilterString(row[key])"></td>
                </tr>
            </tbody>
        </table> 
    </div>

和CSS:

    .data-table {
        overflow-x: scroll; 
        display: block;
        width: 100%;
    }
    .datatable-body {
        display:block;
        height: calc(100vh - 118px);/
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .datatable-head {
        display:block;
        overflow-x: scroll;
    }
    .datatable-head, .datatable-body tr {
        min-width: 100px;
        text-align: center;
    }
    .datatable-body td {
        min-width: 100px;
        text-align: center;
    }
    .datatable-head th {
        min-width: 100px;
        text-align: center;
    }

这里有什么问题？

Answer 1

我注释掉了 overflow-x 元素，它现在似乎工作正常。摆弄静态 html 内容

https://jsfiddle.net/v7qpot2b/

 .datatable-body {
        display:block;
        height: calc(100vh - 118px);/
        overflow-y: scroll;
        /* overflow-x: hidden; */
    }