O que eu queria era conseguir que todas as colunas tivessem o mesmo tamanho independentemente do tamanho do nome do dia da semana em questão
3 Respostas
Uma forma de resolver isso é com a propriedade table-layout
, usado o valor como fixed
vc determina que o algorítimo de construção da tabela deve manter uma largura proporcional de todas as colunas, como vc pode consultar na documentação da Mozilla sobre o assunto: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
OBS: Essa é uma propriedade antiga, ainda do CSS2, então é amplamente aceita por todos os Browsers.
Agora seguem três modelos de tabela, um com table-layout: fixed
e outra sem (table-layout: auto
) para vc poder comparar, além de uma fixed
com largura definida. Exiba também em "Página toda" para ver como ela se comporta quando a tela aumenta:
table {
width: 100%;
border-collapse: collapse;
border: 1px solid black;
text-align: center;
table-layout: fixed;
}
td, th {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
<p>table com table-layout: fixed</p>
<table >
<thead>
<tr>
<th>texto</th>
<th>texto texto texto</th>
<th>texto texto</th>
<th>te</th>
<th>umapalavramuitomuitogrande</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
<p>table com table-layout: auto</p>
<table style="table-layout: auto;">
<thead>
<tr>
<th>texto</th>
<th>texto texto texto</th>
<th>texto texto</th>
<th>te</th>
<th>umapalavramuitomuitogrande</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
<p>table com table-layout: fixed e largura fixa</p>
<table style="table-layout: fixed; width: 400px;">
<thead>
<tr>
<th>texto</th>
<th>texto texto texto</th>
<th>texto texto</th>
<th>te</th>
<th>umapalavramuitomuitogrande</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
Defina uma largura mínima para todos os <td>
de sua tabela, que seja no mínimo o tamanho do cabeçalho de coluna mais longo:
.minhatabela td {
min-width: 150px;
}
/* pura cosmetica */
.minhatabela {
height: 100%;
border-collapse: collapse;
border: 1px solid black;
}
.minhatabela thead td {
border-bottom: 1px solid black;
}
.minhatabela td {
border-left: 1px solid black;
border-right: 1px solid black;
text-align: center;
}
<table class="minhatabela">
<thead>
<tr>
<td>Título médio</td>
<td>Título bem comprido</td>
<td>Oi!</td>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tbody>
</table>
td
da primeiratr