自适应表格 table 自动出现滚动条 overflow

·  阅读 199
自适应表格 table 自动出现滚动条 overflow

现在有一个需求,要求一个表格能够自适应地出现滚动滑条,先看实现的效果。

这是默认的情况

image-20210714225242870.png

左右是默认宽度的占位,中间是内容区域,宽度自适应。

看看出现滚动滑块的情况。

image-20210714225335399.png

由于表格的内容区域被压缩,位置不足以展示表格内所有内容,又不允许表格内容换行,所以出现了滚动滑块。

实现代码如下。

html部分

<div class="layout">
    <div class="left">Left-400px</div>
    <div class="content">
        <div class="content-top">content-top</div>
        <div class="table-container">
            <table cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th colspan="3">The table header</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>The table body</td>
                        <td>with two columns</td>
                        <td>some rest information</td>
                    </tr>
                    <tr>
                        <td>The table body</td>
                        <td>with two columns</td>
                        <td>less information</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="content-bottom">
            The scope attribute on header elements is redundant in simple
            contexts, because scope is inferred. However, some assistive
            technologies may fail to draw correct inferences, so specifying header
            scope may improve user experiences. In complex tables, scope can be
            specified so as to provide necessary information about the cells
            related to a header.
        </div>
    </div>
    <div class="right">Right-400px</div>
</div>
复制代码

css部分

div.layout {
    display: flex;
}
div.left,
div.right {
    flex: 1 0 400px;
    background-color: cyan;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.content {
    overflow-x: hidden;
    background-color: antiquewhite;
}
div.content div {
    margin: 10px;
    border: darkolivegreen 1px solid;
}

div.table-container {
    overflow-x: auto;
}
table {
    width: 100%;
}
table,
td {
    border: 1px solid #333;
}
table th {
    white-space: nowrap;
}
table td {
    white-space: nowrap;
}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}
复制代码

下面说一下实现原理。

首先是中间内容自适应,这里使用了flex布局,不明白的看阮一峰的flex,现在自适应基本要么用这套方案,要么用absolute定位。

用flex有两种写法,一种是指定两边宽度然后内容部分 flex:1,另一种就是下面这种,无所谓,都一样。

div.layout {
    display: flex;
}
div.left,
div.right {
    flex: 1 0 400px;
}
复制代码

接着是内容部分,由于内容部分包含很多内容,不只有表格,而我们不想要整个内容部分有滑块,只想要表格有滑块,所以需要做一些比较复杂的处理。

由于表格中的内容会自动换行,为了阻止这一行为,我们需要应用 white-space: nowrap

table th {
    white-space: nowrap;
}
table td {
    white-space: nowrap;
}
复制代码

首先我们要把表格用 div.table-continer 来包装起来(不包装也可以实现类似的效果,但会对后续css编码造成麻烦,这里建议包装这一层),然后将 div.content 部分的 overflow 设置成 hidden,再将 div.table-containeroverflow 设置成 auto

div.content {
    overflow-x: hidden;
}
div.table-container {
    overflow-x: auto;
}
复制代码

到这一部分,就实现了滑块出现在 table 中,但是 table 没有自动展开,很简单

table {
    width: 100%;
}
复制代码

到此为止就实现了所有需求了,还有一些样式上的优化,就没必要赘述了。

分类:
前端
标签:
分类:
前端
标签: