Fixed header table - table resize

Question

I'm creating a table using this jQuery plugin FixedHeaderTable.

As far as I found out from other users' questions, the table width follows the width of its container but cannot automatically resized (I already tried it). I want my table to be 1302px when the window size is 1366px or larger, and 100% - 48px when it is smaller than that.

So far I tried resizing my table container like this (the table resizes as I wanted), but there may be a problem with the destroy method. As you can see my table header get doubled when I resize the window. However, if I didn't call this destroy method and rebuild, my table doesn't get resized at all and only follow the initial window width when it first get built.

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>

on first execution clearTimeout through the exception because resizeTimer is undefined.you can handle the different sizes with media query no need of js — Shahid Islam
– Shahid Islam, Commented Apr 29, 2019 at 10:27
No need to always use JS! Use media queries. Edit: look at the answer from @Vladimir Rodichev — Aaron3219
– Aaron3219, Commented Apr 30, 2019 at 18:18
@ShahidIslam I tried it but it works different with this plugin... — Dolorosa
– Dolorosa, Commented May 27, 2019 at 3:59
@Aaron3219 I tried it but it works different with this plugin... — Dolorosa
– Dolorosa, Commented May 27, 2019 at 3:59

Vladimir Rodichev · Accepted Answer · 2019-04-30 11:36:43Z

Use @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>

var resizeTimer; var wrapperWidth; $(window).on('resize', function(e) { $('.fixed-table').fixedHeaderTable('destroy'); ....
Can you please edit your code? Also please include the plugin :)
You forgot to include fixedheadertable js on the html so it doesn't work
@Dolorosa it is not necessary. Your problem is solved with the help of css. my native language is different. set the task more specifically.

Collectives™ on Stack Overflow

Fixed header table - table resize

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related