原生css table固定高度+固定表头

最新推荐文章于 2024-06-11 16:31:10 发布

陈艾落

最新推荐文章于 2024-06-11 16:31:10 发布

阅读量1k

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/feifei9989/article/details/131699389

版权

转载https://www.cnblogs.com/nanfei/p/16319915.html

略有修改


    .table-fixedHeader {
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
        display: block;
        width: 100%;
        table-layout: fixed;
        --vetialBorder: 1px;
    }
    
    .table-fixedHeader thead {
        border-left: 1px solid #DFE2EB;
        border-top: 1px solid #DFE2EB;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    
    .table-fixedHeader thead tr {
        height: 40px;
        line-height: 40px;
    }
    
    .table-fixedHeader thead tr>th {
        background-color: #fafafa;
        font-weight: bold;
        border-bottom: 1px solid #DFE2EB;
        border-right: var(--vetialBorder) solid #DFE2EB;
        color: #909399;
        text-align: center;
        min-width: 40px;
    }
    
    .table-fixedHeader tbody {
        border-left: 1px solid #DFE2EB;
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    
    .table-fixedHeader tbody tr {
        height: 40px;
        line-height: 40px;
    }
    
    .table-fixedHeader tbody tr td {
        border-bottom: 1px solid #DFE2EB;
        border-right: var(--vetialBorder) solid #DFE2EB;
        text-align: center;
    }


        <div class="container-fluid  goods_table table-responsive">
            <table class="table table-hover table-fixedHeader">
                <thead>
                    <tr>
                        <th class="hidden-xs" width="36px">
                            <input type="checkbox" id="checkAll" />
                        </th>
                        <th width="100px">序号</th>
                        <th width="300px">商品名</th>
                        <th>分类</th>
                        <th>状态</th>
                        <th>规格</th>
                        <th width="120px">数量</th>
                        <th>价格</th>
                        <th>过期日期</th>
                        <th>sku</th>
                        <th>69码</th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
                            <td class="hidden-xs" width="36px">
                            	<input type="checkbox" name="chkItem" value="9865" />
                            </td>
                            <td width="100px">9865</td>
                            <td width="300px">买不起卖不起买不起卖不起56555ml超级热销产品</td>
                            <td>无敌分类</td>
                            <td style="color: red;">下架</td>
                            <td>超级袋装</td>
                            <td width="120px">665</td>
                            <td>￥999.99</td>
                            <td>2323-02-10 15：11</td>
                            <td>65889944112235555</td>
                            <td>695789454115</td>
                        </tr>
                </tbody>
            </table>
        </div>