3
Temperatura Precipitação Vento Pressão Atmosférica

Segunda Terça Quarta Quinta Sexta Sábado Domingo

Este é o output

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

1
  • só com HTML coloque width="valor" em todas as td da primeira tr
    – user60252
    4/11/2017 às 16:51

3 Respostas 3

2

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>

1

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>

-3

manu resolvi colocando width 100% no html mesmo ficou muito bom

Th com Width a 100%

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .