flexbox to do everything on the site, including the table, first I tried using the basic structure of a table ( thead , tbody and tfoot ), however I could not, so I tried to do with simple rows and columns.
I'm facing a problem with responsiveness, to make responsive I just want to leave a side scroll , thus not distorting the text information.
The example below works for the content, because when the screen is flat the scroll appears, but the header does not get full width. I'm already trying to leave the correct width a good while.
How do I make the header columns follow the width of the lines below? I do not want to set fixed widths, because the intention is to have the same style for all site tables, 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>