HTML table floating header without using fixed hei

All the examples I saw with table and fixed header are using css

tbody {
  height: 120px;
  overflow-y: auto;
}

This creates double vertical scrollbars. One is from the browser itself, the other one is from the table. If a page just has one table of width:100%, this double scroll bar is very ugly and not responsive. Is there another way to do this without setting the tbody height so that only the body rows are scrolled off the screen, the table header row is always visible and only one vertical scrollbar in the browser?

As has been mentioned, using table and responsive design do not go hand in hand. I have tried many plugins to solve this but none really to it very well.

But in answer to the scroll bar question, you can use the position:sticky; to make the table header stay on the screen as you scroll through the table vertically.

I hope i understood the question correctly:

header,footer {
  height: 50px;
  width: 100%;
  background: #333;
  color: #fff;
  text-align: center;
}

#spacer {
  height: 500px;
  width: 100%;
  background: #eee;
}

table {
  width: 100%;
  text-align: center;
}
table td {
  border:1px solid #333;
  padding: 30px 0px;
}
table tr:first-child th {
  position:sticky;
  top:0px;
  background: #333;

}
table tr:first-child th {
  color: #fff;
  padding: 20px 0px;
}

<header><h1>Scroll Down</h1></header>
<div id="spacer"></div>
<table>
  <tr>
    <th>Column One</th>
    <th>Column Two</th>
    <th>Column Three</th>
    <th>Column Four</th>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
  <tr>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
    <td>23124</td>
  </tr>
</table>

<div id="spacer"></div>
<div id="spacer"></div>
<footer><h1>The End</h1></footer>