How to put columns of a table all the same size?

Question

Temperature Precipitation Wind Atmospheric Pressure

Second Tuesday Fourth Fifth Sixth Saturday Domingo

What I wanted was to get all the columns to be the same size regardless of the name of the day of the week in question

Answer 1

One way to settle this is with the property table-layout, used the value as fixed vc determines that the table construction algorithm should maintain a proportional width of all columns, as you can see in the Mozilla documentation on the subject: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

OBS: This is an old property, still from CSS2, so it is widely accepted by all Browsers.

Now follow three table templates, one with table-layout: fixed and another without (table-layout: auto) so you can compare, in addition to a fixed width-defined. Also display under "Full Page" to see how it behaves when the screen increases:

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>

Answer 2

Set a minimum width for all <td> of your table, which is at least the size of the longest column header:

.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>

Answer 3

Manu I decided putting width 100% in html even got very good