I have a problem with the header of a table, it is not responsive and no look good

Question

I have this table and I rounded the corners of both the table header and the table items, but I can't resolve the issue of the items in this table appearing in the rounded corner of the header.

I'm using bootstrap properties in this table, sticky-top for example plus some configurations with scss.

<div className="col-md-9" style={{ overflowX: "auto", maxHeight: "80vh" }}>
            {loadingData ? (
              <Spinner size={40} />
            ) : (
              <table className={`table ${stylesTable.customTable}`}>
                <thead className="bg-dark-green sticky-top">
                  <tr>
                    <th className={className}>{NameToUse["xxxx"]}</th>
                    <th className={className}>{NameToUse["xxxx"]}</th>
                    <th className={className}>{NameToUse["xxxx"]}</th>
                    <th className={className}>{NameToUse["xxxx"]}</th>
                    <th className={className}>{NameToUse["xxxx"]}</th>
                    <th className={className}>{t("snc.area")} (ha)</th>
                    <th className={className}>{t("snc.predominantSoil")}</th>
                    <th className={className}>xxxx</th>
                    <th className={className}>{t("snc.protectionIndicator")}</th>
                    <th className={className}>{t("snc.xxxxxxxxr")}</th>
                    <th className={className}>{t("snc.xxxxxxxxr")}</th>
                    <th className={className}>{t("snc.xxxxxxxxr")}</th>
                    <th className={className}>{t("snc.pxxxxxxxxrxxxxxxxxr")}</th>
                    <th className={className}>{t("snc.pxxxxxxxxxxxxxxxxxr")}</th>
                    <th className={className}>{t("snc.pxxxxxxxxxxxxxxxxxxr")}</th>
                  </tr>
                </thead>
                <tbody className={`p-2 fs-sm bg-white table ${stylesTable.customTable}`}>
                  {sustainabilityData
                    ?.slice((currentPage - 1) * 100, currentPage * 100)
                    .map((item, idx) => {
                      return (
                        <tr key={idx} className="rounded-10">
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                          <td className={className}>{item.yyyy}</td>
                        </tr>
                      );
                    })}
                </tbody>
              </table>
            )}
          </div>

@import "../../../styles/variables";

.customTable {
  border-collapse: initial;
  border-spacing: 0px;
  width: 100%;

  @media (max-width: 769px) {
    width: 100vw;
  }

  thead {
    tr {
      background-color: transparent;
      color: $light;
      text-align: center;
  
      th {
        padding: 0.5rem;
        margin-bottom: 1rem;
        border-bottom: none;
        font-weight: 400;
        cursor: pointer;

        &:first-child {
          border-radius: 20px 0 0 20px;
        }

        &:last-child {
          border-radius: 0 20px 20px 0;
        }

        &:hover {
          color: $light-green;
          transition: 0.2s;
        }
      }  
    }
  }

  tbody {
    tr {
      background-color: transparent;
      text-align: center;

      td {
        background-color: none;
        padding: 0.5rem;

        &:first-child {
          border-radius: 20px 0 0 20px;
        }

        &:last-child {
          border-radius: 0 20px 20px 0;
        }
      }
    }
  }
}

I want the header to swallow the items before they reach the maximum height of the container, look at the image