原生table实现thead固定，tbody高度超出时滚动的实现方法

最新推荐文章于 2024-08-01 11:14:32 发布

咖喱&土豆

最新推荐文章于 2024-08-01 11:14:32 发布

阅读量817

点赞数

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/qq_35703552/article/details/123380630

版权

在这里插入图片描述

<div class="table-wrapper">
      <table cellpadding="0" cellspacing="0">
          <thead>
            <th >序号</th>
            <th *ngFor="let item of columns; let i = index">{{item.title}}</th>
            <th >操作</th>
          </thead>
              <tbody>             
                  <tr *ngFor="let ritem of this.resultList; let i = index">
                   <td >{{i+1}}</td>
                   <td [title]="ritem[citem.key]"*ngFor="let citem of columns; let i = index" >{{ritem[citem.key]}}</td>
                   <td><a class="more_btn" (click)="delete(ritem)">删除</a></td>
                 </tr>
               </tbody>
      </table>
  </div>

.table-wrapper {
    table {
       table-layout: fixed;
       width: 100%;
       text-align: left;
       font-size: 10px;
       box-shadow: 0px 0px 2px 0px #ccc;
        thead {
            display: flex;
            justify-content: space-between;
            background-color: #f2f6fc;
            th {
              font-size: 12px;
              font-weight: 600;
              color: #4c4c4c;
              font-weight: 600;
              padding: 8.5px 1.2rem;
              border-radius: 3px 3px 0px 0px;
              height: 100%;
              opacity: 0.8;
              text-align: left;
            }
          }
        tbody{
            display: inline-block;
            width: 100%;
            overflow: auto;
            max-height: 35.625rem;
            background-color: #fff;
            tr {
                border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                display: flex;
                justify-content: space-between;
                width: 100%;
                td {
                    display: inline-block;
                    color: #606266;
                    padding: 8.5px 1.2rem;
                    font-size: 12px;
                    font-weight: 400;
                    text-align: left;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                  }
              }
        
            
        }
    }
}