Sticky Scrollbar at Bottom of Table

Horizontal scrollbar stick to bottom

I find out a workaround using a custom scroll bar.
checkout here,
https://codepen.io/devashishg/pen/oNzREaw

const $scroller = document.getElementById("scroller");
const $containers = document.getElementById("container_body");
const $wrapper = document.getElementById("wrapper");
let ignoreScrollEvent = false;
animation = null;
const scrollbarPositioner = () => {
  const scrollTop = document.scrollingElement.scrollTop;
  const wrapperTop = $wrapper.offsetTop;
  const wrapperBottom = wrapperTop + $wrapper.offsetHeight;

  const topMatch = window.innerHeight + scrollTop >= wrapperTop;
  const bottomMatch = scrollTop <= wrapperBottom;

  if (topMatch && bottomMatch) {
    const inside =
      wrapperBottom >= scrollTop &&
      window.innerHeight + scrollTop <= wrapperBottom;

    if (inside) {
      $scroller.style.bottom = "0px";
    } else {
      const offset = scrollTop + window.innerHeight - wrapperBottom;

      $scroller.style.bottom = offset + "px";
    }
    $scroller.classList.add("visible");
  } else {
    $scroller.classList.remove("visible");
  }

  requestAnimationFrame(scrollbarPositioner);
};
requestAnimationFrame(scrollbarPositioner);
$scroller.addEventListener("scroll", (e) => {
  if (ignoreScrollEvent) return false;
  if (animation) cancelAnimationFrame(animation);
  animation = requestAnimationFrame(() => {
    ignoreScrollEvent = true;
    $containers.scrollLeft = $scroller.scrollLeft;
    ignoreScrollEvent = false;
  });
});
$containers.addEventListener("scroll", (e) => {
  if (ignoreScrollEvent) return false;
  if (animation) cancelAnimationFrame(animation);
  animation = requestAnimationFrame(() => {
    ignoreScrollEvent = true;
    $scroller.scrollLeft = $containers.scrollLeft;
    ignoreScrollEvent = false;
  });
});

.long {
  width: 1550px;
}

#container_body {
  overflow: hidden;
  padding-bottom: 20px;
}

#scroller {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: scroll;
  display: none;
}

#scroller.visible {
  display: block;
}

#scroller .long {
  height: 1px;
}

Hello<br/>
<div id="wrapper">
    <div id="container_body">
      <div class="long"> Long text</div>
      Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />A. Long text
      <br />
    </div>
    <div id="scroller">
      <div class="long">
      </div>
    </div>
</div>
Bye

table with sticky header and horizontal scroll

As per the MDN documentation:

a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.

There's an active GitHub issue discussing this on the W3C repo, which has been running since 2017. There have been various workarounds suggested, but they all seem to rely on adding a fixed height to the table / table container, or using Javascript as in this answer.

At least for the moment, this is not something that's supported natively.

horizontal scrollbar on top and bottom of table

To simulate a second horizontal scrollbar on top of an element, put a "dummy" div above the element that has horizontal scrolling, just high enough for a scrollbar. Then attach handlers of the "scroll" event for the dummy element and the real element, to get the other element in synch when either scrollbar is moved. The dummy element will look like a second horizontal scrollbar above the real element.

For a live example, see this fiddle

Here's the code:

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div>

CSS:

.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y:hidden;
}

.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }

.div1 {
  width:1000px;
  height: 20px;
}

.div2 {
  width:1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}

JS:

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

Horizontal scrollbar on table with sticky header

i have fixed this issue by providing the container a fixed max height, that way it will have the sticky header and scrolling as well.

.table-flow {
  max-height: 555px;
  overflow-x: scroll;
  max-width: auto;
  position: relative;
}

How to use position sticky for horizontal scrollbar?

I think you just need the sticky on the first column:

.wrapper {
  max-width: 400px;
  overflow-x: scroll;
}

table {
  position: relative;
  border: 1px solid #ddd;
  border-collapse: collapse;
}

td, th {
  white-space: nowrap;
  border: 1px solid #ddd;
  padding: 20px;
  text-align: center;
}

td:first-of-type {
  background-color: #eee;
  position: sticky;
  left: -1px;
  text-align: left;
}

<div class="wrapper">
<table>
  <tbody>
    <tr>
        <td>Some header</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Some header</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
    </tr>
  </tbody>
</table>
</div>

Position sticky to bottom of scrollable element

You need to change the display of the .container to flex

display: flex;
flex-direction: column;

And the .footer needs to have a margin-top: auto;

See code here:

.container {
  position: relative;
  overflow-y: scroll;
  height: 150px;
  border: solid 1px black;
  display: flex;
  flex-direction: column;
}

.footer {
  position: sticky;
  right: 0;
  bottom: 0;
  float: right;
  background-color: lightblue;
  margin-top: auto;
}

<div class="container">
  <table>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
  </table>
  <div class="footer">Footer</div>
</div>
<br/>
<div class="container">
  <table>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
  </table>
  <div class="footer">Footer</div>
</div>