代码之家  ›  专栏  ›  技术社区  ›  Dolorosa

固定页眉表-调整表大小

  •  0
  • Dolorosa  · 技术社区  · 5 年前

    我正在使用这个jQuery插件创建一个表 FixedHeaderTable .

    destroy 方法。正如你所看到的,当我调整窗口大小时,我的表头会翻倍。不过,如果我不这么说 破坏

    var resizeTimer;
    var wrapperWidth;
    
    $(window).on('resize', function(e) {
      $('.fixed-table').fixedHeaderTable('destroy');
      if ($(window).width() > 1366) {
        $('.fixed-table-wrapper').css({"width":"1302px"});
      }
      else {
        windowWidth = $(window).width() - 48;
        $('.fixed-table-wrapper').css({"width": windowWidth + "px"});
      }
      $('.fixed-table').fixedHeaderTable({ 
        footer: false, 
        fixedColumn: true, 
        height: '420px',
        altClass: 'alternate-row',
        autoShow: false
      });
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
        $('.fixed-table').fixedHeaderTable('show'); 
      }, 250);
    });
    .fixed-table-wrapper {
      width: 1302px;
      overflow-x: scroll; 
    }
    
    .fixed-table thead {
      border-bottom: solid 2px #d1d1d1;
      font-weight: 700 !important;
    }
    
    table.fixed-table th,
    table.fixed-table td {
      border: none; 
      font-size: 13px; 
      padding: 11px 12px;
      vertical-align: middle;
    }
    
    .sortable {
      position: relative;
    }
    
    .sortable::after {
      font-family: "Font Awesome 5 Free";
      color: #aaa;
      content: '\f0dc';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .alternate-row {
      background-color: #f8f8f8; 
    }
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
    <link type="text/css" href="https://rawgit.com/markmalek/Fixed-Header-Table/master/css/defaultTheme.css" rel="stylesheet">
    
    <div class="fixed-table-wrapper">
    <table class="fixed-table">
      <thead>
    	<tr>
        <th></th>
        <th>Edit</th>
        <th class="sortable">Request No.</th>  
        <th class="sortable">Employee ID</th>  
        <th class="sortable">Employee Name</th>  
        <th class="sortable">For Family</th> 
        <th class="sortable">Request Date</th> 
        <th>Editable Example</th> 
        <th>Total Amount</th> 
        <th>Details</th>
        <th>Approval History</th> 
    	</tr>
      </thead>
      <tbody>
    	<tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>I Putu Yudi Haryasa</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Daniel Giovanni Gunawan</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Muhammad Nadzeri Munawar</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Glenn Kristanto</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Hendryanto Fudiko</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>I Putu Yudi Haryasa</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Daniel Widjaja</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Faris Kurniawan</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Romy Kusuma</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Muhammad Nadzeri Munawar</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      </tbody>
    </table>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://rawgit.com/markmalek/Fixed-Header-Table/master/jquery.fixedheadertable.min.js"></script>
    0 回复  |  直到 5 年前
        1
  •  4
  •   Vladimir Rodichev    5 年前

    .fixed-table-wrapper {
        width: calc(100% - 48px);
    }
    @media (min-width: 1366px) {
    .fixed-table-wrapper {
      width: 1302px;
    }
    }
    

    .fixed-table-wrapper {
        width: calc(100% - 48px);
        overflow-x: scroll;
        margin-left: auto;
        margin-right: auto;
        background-color: yellow;
    }
    
    .fixed-table thead {
      border-bottom: solid 2px #d1d1d1;
      font-weight: 700 !important;
    }
    
    table.fixed-table th,
    table.fixed-table td {
      border: none; 
      font-size: 13px; 
      padding: 11px 12px;
      vertical-align: middle;
    }
    
    .sortable {
      position: relative;
    }
    
    .sortable::after {
      font-family: "Font Awesome 5 Free";
      color: #aaa;
      content: '\f0dc';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .alternate-row {
      background-color: #f8f8f8; 
    }
    
    @media (min-width: 1366px) {
    .fixed-table-wrapper {
      width: 1302px;
    }
    }
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
    <link type="text/css" href="https://rawgit.com/markmalek/Fixed-Header-Table/master/css/defaultTheme.css" rel="stylesheet">
    
    <div class="fixed-table-wrapper">
    <table class="fixed-table">
      <thead>
    	<tr>
        <th></th>
        <th>Edit</th>
        <th class="sortable">Request No.</th>  
        <th class="sortable">Employee ID</th>  
        <th class="sortable">Employee Name</th>  
        <th class="sortable">For Family</th> 
        <th class="sortable">Request Date</th> 
        <th>Editable Example</th> 
        <th>Total Amount</th> 
        <th>Details</th>
        <th>Approval History</th> 
    	</tr>
      </thead>
      <tbody>
    	<tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>I Putu Yudi Haryasa</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Daniel Giovanni Gunawan</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Muhammad Nadzeri Munawar</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Glenn Kristanto</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Hendryanto Fudiko</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>I Putu Yudi Haryasa</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Daniel Widjaja</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Faris Kurniawan</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Romy Kusuma</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      <tr>
        <td></td>
        <td><i class="fas fa-pencil-alt"></i></td>
        <td>REI/TRA/04/005</td> 
        <td>EMP004</td>
        <td>Muhammad Nadzeri Munawar</td>
        <td><i class="fas fa-minus yes-no"></i></td>
        <td>04 May 2018</td>
        <td></td>
        <td>300,000.00</td>
        <td>See details</td>
        <td>See approvals</td>
      </tr>
      </tbody>
    </table>
    </div>