MDBTable horizontal scroll?

Just wrap MDBTable like here:

        <div style={{ overflowX: 'auto' }}>
          <MDBTable>
            <MDBTableHead>
              <tr>
                <th scope='col'>#</th>
                <th scope='col'>First</th>
                <th scope='col'>Last</th>
                <th scope='col'>Handle</th>
              </tr>
            </MDBTableHead>
            <MDBTableBody>
              <tr>
                <th scope='row'>1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <th scope='row'>2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <th scope='row'>3</th>
                <td colSpan={2}>Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </MDBTableBody>
          </MDBTable>
        </div>

About the sticky column, it's only possible in MDBDatatable.

I have made the first three columns sticky as desired but the first non-sticky item hides behind the sticky columns on overflow. Do you know how I can fix this?

const TableDiv = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  max-width: 1100px!important;

  overflow-x: auto;

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
`

const Table = styled(MDBTable)`
  && {
    align-self: center;
    width: auto;
    max-width: 80vw!important;

    overflow-x: auto;

    & tr, td {
      background-color: #fff;
    }

    background-color: #fff;
    z-index: 2;

    & :not(caption) > * > * {
      border: 0;
    }

    & .float-right {
      text-align: right!important;
    }

    & .item, .label {
      text-align: left;
      background-color: #fff;
    }

    & td, th {
      position: relative;
      text-align: center;
      transition: width 2s ease, min-width 2s ease, max-width 2s ease;
      z-index: 1;
    }

    & tr th:first-child, tr td:nth-child(-n + 2) {
      position: sticky;
      left: 0;
      z-index: 3;
    }

    & tr th:nth-child(n + 2), tr td:nth-child(n + 2) {
      margin-left: 162px;
    }

    & tr td:nth-child(2) {
      position: sticky;
      left: 17px;
      z-index: 3;

      border-left-width: 0;

    }

  }
`