React.js thead inside table is overlapped by other element in ms edgebrowser print

Question

Hello ladies and gentlemen,

I have following problem with my React.js frontend when trying to print a site with the edge browser (not happening with Chrome): when I print the whole page the thead inside the table is overlapped by the afterwards following element which is used as "after-data-footer".

This the print.scss:

@media screen {
  .printOnly {
    display: none;
  }
}

@media print {
  .noPrint,
  .hiddenNotSticky {
    display: none !important;
  }

  .printOnly {
    display: block;
  }

  .sticky,
  .stuck {
    position: relative !important;
  }

  @page {
    size: auto;
    margin: 20mm 10mm 20mm 20mm;
  }

  body,
  #main,
  #app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: initial;
    max-height: 100%;
    font-size: 12pt;
  }

  wb-notification {
    display: none;
  }

  wb-grid {
    padding: 0 !important;
  }

  header,
  footer {
    background-color: white !important;
    position: relative !important;
  }

  .MuiAccordion-root {
    & > div {
      height: auto !important;
      visibility: visible !important;
      overflow: visible;
    }

    .MuiCollapse-root {
      .subsection {
        padding: 12pt 0;
      }
    }

    .MuiAccordionSummary-root {
      background-color: white !important;

      .MuiBox-root {
        background-color: white !important;
      }

      .MuiButtonBase-root {
        display: none;
      }
    }
  }
}

and this the code in which the thead gets overlapped : (btw the tbody afterwards is not getting overlapped if it holds data)

<table
            className={`xyz-table xyz-table--border-horizontal ${styles.furtherContractsTable}`}
          >
            <thead>
              <tr>
                <th scope="col" className={styles.tableHead}>
                  {t("companyData")}
                </th>
                <th scope="col" className={styles.tableHead}>
                  {t("companyData")}
                </th>
                <th scope="col" className={styles.tableHead}>
                  {t("companyData")}
                </th>
                <th scope="col" className={styles.tableHead}>
                  {t("companyData")}
                </th>
                <th scope="col" className={styles.tableHead}>
                  {t("companyData")}
                </th>
                <th scope="col" className={styles.tableHead}>
                  {t("companyData")}
                </th>
              </tr>
            </thead>
            <tbody>
              {(companyData || []).map((companyData, companyData) => (
                <tr
                  className={styles.tableRow}
                  key={companyData}
                  onClick={() => {
                    browserHistory.push(`companyData`);
                  }}
                >
                  <td>
                    {companyData}
                    {!_.isNil(companyData) && (
                      <span className={styles.additionalContractSource}>
                        {companyData}
                      </span>
                    )}
                  </td>
                  <td>
                    {r.bool(_.isNil(companyData) ? false : companyData)}
                  </td>
                  <td>{companyData}</td>
                  <td>{companyData}</td>
                  <td>{companyData}</td>
                  <td>
                    {r.date(companyData)}
                    {" / "}
                    {r.date(companyData)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

Here is the .scss belonging to the table:

@import "company/core/dist/scss/utility";

.furtherContractsTable {
  td,
  th {
    font-size: 1rem !important;
  }
}

.tableHead {
  border-top: none !important;

  &:first-child {
    padding-left: 0;
  }

  &:last-child {
    padding-right: 0;
  }
}

.tableRow {
  &:hover {
    cursor: pointer;
    background: var(--xyz-grey-90);
  }

  td:first-child {
    padding-left: 0;
  }

  td:last-child {
    padding-right: 0;
  }

  &:last-child {
    border-bottom: 1px solid var(--xyz-grey-70);
  }
}

.paginationWrapper {
  display: flex;
  justify-content: center;
  margin: var(--xyz-spacing-xs) 0;
}

.additionalContractSource {
  &::before {
    content: " (";
    white-space: pre;
  }

  &::after {
    content: ")";
  }

  color: var(--xyz-grey-45);
}

The "after-data-footer" is set as following inside this code:

function Footer() {
  const { t } = useTranslation();
  const { user } = useStoreon<StoreState, StoreEvents>("user");
  const currentYear = new Date().getFullYear();
  const authenticated = Object.keys(user).length > 0;

  return (
    <footer className={styles.footer}>
      <GridContainer>
        <XYZGridRow>
          <XYZGridCol mq1={12} allowOverflowX>
            <div className={styles.footerContainer}>
              <div className={styles.logoWrapper}>
                <div className={styles.logo}>
                  <img
                    src={logo}
                    height={18}
                    alt="companyData"
                    className="noPrint"
                  />
                  <img
                    src={logoBlack}
                    height={18}
                    alt="companyData"
                    className="printOnly"
                  />
                </div>
                <p className={styles.copyright}>
                  {t<string>("companydata", {
                    currentYear: currentYear,
                  })}
                </p>
              </div>
            </div>
          </WbGridCol>
        </WbGridRow>
      </GridContainer>
    </footer>
  );
}

export default memo(Footer);

and the css for it:

.footer {
  color: var(--xyz-white);
  background-color: var(--xyz-black);
  z-index: 1202;
  @include xyz-type-button-secondary;
}

.footerContainer {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;

  @include breakpoint-from(mq5) {
    flex-direction: row;
    justify-content: space-between;
  }
}

.logoWrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: var(--xyz-spacing-xxs);

  @include breakpoint-from(mq5) {
    padding: 0;
    flex-direction: row;
  }
}

.logo {
  display: flex;
  align-items: center;
}

I hope the information was enough to see the problematic. Thank you in advance.