css 设置table 单元格长度的问题

最新推荐文章于 2024-06-22 12:35:18 发布

qq_42289686

最新推荐文章于 2024-06-22 12:35:18 发布

阅读量2.4k

点赞数

分类专栏： HTML CSS 文章标签： table table单元格长度

本文链接：https://blog.csdn.net/qq_42289686/article/details/101618822

版权

HTML 同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

见代码：
在这里插入图片描述

.table-fixed-box {
    position: relative;
}

.fixed__header {
    position: absolute;
    top: -38px;
    width: 100%;
    left: 0;
    margin: 0;
    overflow: hidden;
    z-index: 102;
    background: white;
}

.row-table {
    width: 100%;
    text-align: left;
    table-layout: fixed
}

.row-table thead {
    color: #97a8b8;
}

.row-table thead th {
    border-bottom: 1px solid #eee;
    line-height: 38px;
    text-align: left;
    position: relative;
}

.fixed__table {
    display: block;
    margin-top: 38px;
    width: 100%;
    min-height: 200px;
    max-height: 580px;
    overflow-y: auto;
}
.row-table tbody tr{
    width: 100%;
    border-bottom: 1px solid #eee;
}
.row-table tbody td {
    position: relative;
    line-height: 30px;
    text-align: left;
    font-size: 12px;
}

<div class="table-fixed-box">
    <div class="fixed__header">
        <table class="row-table" v-show="table !== ''">
            <colgroup>
                <col :width="(Number(index)+1) == table.title.length?' ':item.minWidth" v-for="(item,index) in table.title" :key="index">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th :width="(Number(index)+1) == table.title.length?' ':item.minWidth" v-for="(item,index) in table.title" :key="index">{{selectTitle(item.title)}}</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div class="fixed__table">
        <table class="row-table" v-show="table !== ''">
            <colgroup>
                <col :width="(Number(index)+1) == table.title.length?' ':item.minWidth" v-for="(item,index) in table.title" :key="index">
                <col>
            </colgroup>
            <thead>
            <tr style="display: none;">
                <th :width="(Number(index)+1) == table.title.length?' ':item.minWidth" v-for="(item,index) in table.title" :key="index">{{selectTitle(item.title)}}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in table.data" :key="index">
                <td :width="(Number(Index)+1) == table.title.length?' ':items.minWidth" v-for="(items,Index) in table.title" :key="Index">{{item[items.field]}}</td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>