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; */
    }

HTML，CSS：使表可垂直滚动

1 个答案: