HTML、CSS：使表格垂直滚动

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

我的问题是，当表中没有足够的空间时，应该有一个垂直滚动条，但即使在设置

style=“width:600px；overflow-x:scroll”

时，也不会显示滚动条，标题元素会收缩到包装div的宽度，表行也会被剪裁

以下是我的相关代码（使用bootstrap和vue.js 2）：

---

这里有什么问题？

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

---

您需要提供固定高度和溢出值：

height:calc（100vh-118px）

    <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>

    .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;
    }

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