jquery - 固定标题表 - 调整表大小

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

据我从其他用户的问题中发现，表格宽度遵循其容器的宽度，但无法自动调整大小(我已经尝试过)。当窗口大小为 1366 像素或更大时，我希望我的表格为 1302 像素；当窗口大小小于该大小时，我希望表格为 100% - 48 像素。

到目前为止，我尝试像这样调整表容器的大小(表根据我的需要调整大小)，但 destroy 方法可能存在问题。正如您所看到的，当我调整窗口大小时，我的表头加倍了。但是，如果我没有调用此 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>

最佳答案

使用@media

.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>

关于jquery - 固定标题表 - 调整表大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55273512/

jquery - 固定标题表 - 调整表大小

上一篇：jquery - 根据索引为每个子 div 添加类

下一篇：jquery - 在html表格中动态添加新行