Question

我正在使用此jQuery插件FixedHeaderTable创建一个表。

据我从其他用户的问题中发现，表的宽度遵循其容器的宽度，但是无法自动调整大小（我已经尝试过了）。我希望表格在窗口大小为1366px或更大时为1302px，而在窗口大小小于100px时为100％-48px。

到目前为止，我已经尝试过这样调整表容器的大小（表可以根据需要调整大小），但是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>

Answer 1

使用@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>

固定表头-表大小调整

1 个答案: