Force table header to follow width of other columns dynamically

Question

I’m using flexbox to do everything on the site, including the table, first tried using the basic structure of a table (thead, tbody and tfoot), but I couldn’t, so I tried to do it with simple rows and columns.

I’m facing problem with responsiveness, to make responsive I just want to leave a scroll side, thus not distorting the text information.

The example below works for the content, because when the screen is flattened the scroll appears, but the header does not get the full width. I’m already trying to leave the correct width to a long time.

How can I make the header columns follow the width of the rows below? I don’t want to define fixed widths, because the intention is to have the same style for all tables of the site, regardless of the number of columns.

table {
  display: flex;
  flex-direction: column;
  border-collapse: collapse;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

table tr {
  display: flex;
}

table tr td {
  border-bottom: 1px solid #eeeeee;
  padding: 5px 10px 5px 10px;
  flex-grow: 3;
}

table tr:first-child {
  padding: 7px 10px 7px 10px;
  background: #3E2A46;
  color: #ffffff;
  width: auto;
}

table tr:first-child td {
  width: 100%;
  border: none;
}

<table>
    <tr>
        <td>Nome</td>
        <td>Email</td>
        <td>Email</td>
        <td>Email</td>
        <td>Email</td>
        <td>Ações</td>
    </tr>

    <tr>
        <td>Usuário 1 da silva</td>
        <td>usuario1email.com</td>
        <td>usuario1email.com</td>
        <td>usuario1email.com</td>
        <td>usuario1email.com</td>
        <td><button class="btn vermelho">Bloquear</button></td>
    </tr>
    <tr>
        <td>Usuário 2</td>
        <td>usuario2email.com</td>
        <td>usuario1email.com</td>
        <td>usuario1email.com</td>
        <td>usuario1email.com</td>
        <td><button class="btn vermelho">Bloquear</button></td>
    </tr>
</table>