表格如何固定表頭擁有捲軸？

Posted on | Edited on |
  • 原理
  • 先取得thead固定表頭個欄位的寬度，再去調整tbody欄位的寬度。

  • CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .fixed_header tbody {
        display: block;
        width: 100%;
        overflow: auto;
        height: 100px;
    }

    .fixed_header thead {
        display: block;
    }

  • JavaScript

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    function resizeTbodyCol() {
        // Change the selector if needed
        let $table = $('table.fixed_header'),
        $bodyCells = $table.find('thead tr:nth-child(2)').children(),
        colWidth;

        // Get the thead columns width array
        colWidth = $bodyCells.map(function () {
          return $(this).width();
        }).get();

        // Set the width of tbody columns
        $table.find('tbody tr:nth-child(1):not(".ng-hide")')
        .children().not('.ng-hide').each(function (i, v) {
          if (i == (colWidth.length - 1)) {
            let container = document.getElementById("scrollTbody");
            if (container.scrollHeight > container.clientHeight) {
              colWidth[i] = colWidth[i] - 16; // default scroll bar width : 16px
            }
          }
          $(v).width(colWidth[i]);
        });
    }