固定标题表 - 表调整大小

【问题标题】：Fixed header table - table resize固定标题表 - 表调整大小
【发布时间】：2019-04-30 19:36:43
【问题描述】：

我正在使用这个 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>

【问题讨论】：

  • 第一次执行时通过异常清除超时，因为resizeTimer未定义。您可以通过媒体查询处理不同的大小，无需js
  • 不用一直用JS！使用media queries。编辑：看看@Vladimir Rodichev 的答案
  • @ShahidIslam 我试过了，但这个插件的效果不同......
  • @Aaron3219 我试过了，但是这个插件的效果不同...

标签： jquery css html-table fixed-header-tables


【解决方案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>

【讨论】：

  • @Dolorosa delite in plagin:
  • var resizeTimer; var wrapperWidth; $(window).on('resize', function(e) { $('.fixed-table').fixedHeaderTable('destroy'); ....
  • 你能编辑你的代码吗？也请包括插件:)
  • 你忘记在 html 中包含 fixedheadertable js 所以它不起作用
  • @Dolorosa 没必要。您的问题在 css 的帮助下得到解决。我的母语不同。更具体地设置任务。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-04-03
  • 2017-06-27
  • 2020-08-31
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode