Could not figure out how to make my table header fixed on scroll

I am trying to make my table only scroll the body part without scrolling the header with it. I have found many posts regarding fixed header on a table however for the life of me non of them worked for me I don't know why

So here is my table, I removed inside of and to make it simple

 <div className="common-main-table">
            <Table responsive hover>
              <thead>
                <tr>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </Table>
          </div>

and here is the CSS

.common-main-table {
  max-height: 850px;
  overflow: auto;

  table {
    table-layout: auto;
    margin-bottom: 0px !important;

    thead {
      top: 0;
      position: sticky;
      th {
        border-bottom-width: 1px !important;
      }
      tr th {
        vertical-align: middle;
      }
    }
    thead tr th:first-child {
      padding-left: 30px;
    }
    thead tr th:last-child {
      padding-right: 30px;
    }
    tbody {
      background-color: var(--white-bg-color);
      tr td {
        vertical-align: middle;
        font-size: 16px;
      }
    }
    tbody tr:hover {
      background-color: var(--table-main-heading-bg);
    }
    tbody tr:last-child td {
      border-bottom: 0px solid white !important;
    }
    tbody tr td:first-child {
      padding-left: 30px;
    }
    tbody tr td:last-child {
      padding-right: 30px;
    }
    tr th,
    tr td {
      border-right: 0px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    td,
    th {
      border-top: 1px solid var(--main-border-color);
    }
  }
}