table固定表头、固定列

最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。

1. 使用position:sticky来固定表头

html:

<div id="common-table">
    <table id="table-container" cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>

        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr><tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
      
    </table>
  </div>

CSS样式

#common-table {
      width: 100%;
      height: 500px;
      overflow: hidden;
    }

    #table-container {
      height: 400px;
      overflow-y: auto;
      display: block;
      width: 100%;
      table-layout: fixed;
    }

    #table-container 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-container thead tr>th {
      background-color: #fafafa;
      font-size: 14px;
      font-family: Microsoft YaHei UI;
      font-weight: bold;
      color: #333333;
      border-bottom: 1px solid #DFE2EB;
      border-right: 1px solid #DFE2EB;
      padding: 15px;
    }

    #table-container thead tr>th>div {
      padding: 5px 10px;
      min-width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #table-container tbody {
      border-left: 1px solid #DFE2EB;
      display: table;
      width: 100%;
      table-layout: fixed;
    }

    #table-container tbody tr>td {
      font-size: 12px;
      font-family: Microsoft YaHei UI;
      font-weight: 400;
      padding: 13px;
    }

    #table-container td,
    #table-container th {
      border-bottom: 1px solid #DFE2EB;
      border-right: 1px solid #DFE2EB;
      text-align: center;
      padding: 5px;
    }

2. 利用transform固定表头
   通过监听滚动事件，滚动多少PX，就把表头垂直移动多少PX

this.$el.find("#table-container").scroll(function () {
	this.$el.find("#table-container thead").css('transform', 'translate(0, ' + this.scrollTop + 'px)')
});

—> 利用transform固定表头，滚动页面时 会出现边框线丢失的问题，此时需要给 table这一层加上css属性：border-collapse: separate;
3. 固定列

const target = me.$el.find("#depRosterPep")
const columnDom = target.find("tr td:nth-child(-n+2).table-cell-fix, tr:nth-child(1) th:nth-child(-n+2).table-cell-fix");
target.scroll(function (e) {
    //水平滚动时，加上阴影效果，否则去除阴影效果
    this.scrollLeft == 0 && target.find('table').removeClass('table-fix') || target.find('table').addClass('table-fix')
    
    //固定列
    if(this.scrollLeft != me.scroll_x) {
        me.scroll_x = this.scrollLeft
        for (let i = 0; i < columnDom.length; i++) {
            columnDom.eq(i).css('transform', `translateX(${me.scroll_x}px)`)
        }
    }
                    
    //固定表头
    if(this.scrollTop != me.scroll_y) { 
        me.scroll_y = this.scrollTop
        target.find("table thead").css('transform', `translate3d(0, ${me.scroll_y}px, .1px)`)
    }
});

固定列样式

#depRosterPep .table-fix .table-cell-fix-last::after {
    box-shadow: inset 12px 0 8px -8px #00000026;
}
#depRosterPep .table-cell-fix-last::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: -1px;
    width: 30px;
    transform: translate(100%);
    transition: box-shadow .3s;
    pointer-events: none;
}