Move table footer to bottom of scrolling div dynamically using jquery

Question

I have a scenario in which I have to move table footer row's each th tag at the bottom of scrolling div. Here is the plnkr.

I can move it hardcoded by

$('.sticky-table').find("table tfoot tr.sticky-row th").css('top', 260);

but i want to calculate 260 and do it. Need help.

Answer 1

You need to calculate the bottom position of the whole container and subtract the height of the footer header and horizontal scrollbar from it. It will get you the top position of the footer row th elements.

$('.sticky-table.sticky-headers').offset().top //top of the container
+ $('.sticky-table.sticky-headers').outerHeight() //height of the container (adding it with top gives you the bottom position of the container)
- $('.sticky-table').find("table tfoot tr.sticky-row th").outerHeight(true) //height of the footer headers
- 11 //Fixed height of the scrollbar

Created the updated plunker.

Answer 2

This can be achieved with a few simple lines of CSS. This eliminates the need to do complex calculations based on heights and positions in jQuery, and has the added benefit of being responsive, if needed.

The goal is to absolutely position the tfoot element at the bottom of the .sticky-table element.

To do this, we can give the .sticky-table a position: relative;, and the tfoot a position: absolute; bottom: 0;.

.sticky-table {
  /* ...existing styles */
  position: relative;
}

.sticky-table tfoot {
  position: absolute;
  bottom: 0;
}    

Like this:

/* Styles go here */

.sticky-table {
  position: relative;
  max-width: 100%;
  max-height: 500px;
  height: 500px;
  overflow: auto;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 0 !important;
}

.sticky-table table {
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  border-spacing: 0;
}

.sticky-table table tr.sticky-row th,
.sticky-table table tr.sticky-row td {
  background-color: #fff;
  border-top: 0;
  position: relative;
  outline: 1px solid #ddd;
  z-index: 5;
}

.sticky-table table td.sticky-cell,
.sticky-table table th.sticky-cell {
  background-color: #fff;
  outline: 1px solid #ddd;
  position: relative;
  z-index: 10;
}

.sticky-table table tr.sticky-row td.sticky-cell,
.sticky-table table tr.sticky-row th.sticky-cell {
  z-index: 15;
}

.sticky-table tfoot {
  position: absolute;
  bottom: 0;
}

.sticky-table::-webkit-scrollbar {
  width: 0.7em;
  height: 0.7em;
}

.sticky-table::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.sticky-table::-webkit-scrollbar-thumb {
  background-color: #b37e7e;
  outline: 1px solid slategrey;
  border-radius: 5px;
}

<div class="row">
  <div class="col-md-12">
    <div class="sticky-table sticky-headers">
      <table class="table table-striped table-striped">
        <thead>
          <tr class="sticky-row">
            <th>Campaign Name</th>
            <th>Ad Sets</th>
            <th>Ads</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>

          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="sticky-cell">Demo Campaign</td>
            <td class="sticky-cell">100</td>
            <td class="sticky-cell">200</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
          </tr>
          <tr>
            <td class="sticky-cell">Demo Campaign</td>
            <td class="sticky-cell">100</td>
            <td class="sticky-cell">200</td>
            <td>Blue</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>

          </tr>
        </tbody>
        <tfoot>
          <tr class="sticky-row">
            <th class="sticky-cell">Demo Campaign</th>
            <th class="sticky-cell">100</th>
            <th class="sticky-cell">200</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>

          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>