1

Estou usando flexbox para fazer tudo no site, inclusive a tabela, primeiramente tentei usando a estrutura básica de uma tabela (thead, tbody e tfoot), porém não consegui, então tentei fazer com simples linhas e colunas.

Estou enfrentando problema com a responsividade, para tornar responsivo quero apenas deixar um scroll lateral, assim não distorcendo as informações de texto.

O exemplo abaixo funciona para o conteúdo, pois quando a tela é achatada o scroll aparece, mas o cabeçalho não fica com a largura total. Já estou tentando deixar com a largura correta a um bom tempo.

Como consigo fazer as colunas do cabeçalho seguir a largura das linhas abaixo? Não quero definir larguras fixas, pois o intuito é ter o mesmo estilo para todas tabelas do site, independentemente da quantidade de colunas.

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>

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .