css 設置table 單元格長度的問題

見代碼:
在這裏插入圖片描述

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

width三目運算的作用是讓最後一個td的寬度保持自適應,這樣表格就不會撐不滿100%的寬度
兩個位置同樣如此
thead、tbody中也是一樣都要多留一個
如果不留的話就是這樣的效果
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章