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

Question

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

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

Temperature Precipitation Wind Atmospheric Pressure

Monday Tuesday Fourth Fifth Friday Saturday Sunday

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

html css tabela

asked by anonymous 03.11.2017 / 19:24

2 answers

Xamarin Webview with angular Table for Downloads in PHP

score 0 · Answer 1

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

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

score 0 · Answer 2

One way to resolve this is with the table-layout property, using the value as fixed you determine that the table construction algorithm must maintain a proportional width of all columns, as you can see in the Mozilla documentation about the subject: link

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

Now there are three table templates, one with table-layout: fixed and one without% ( table-layout: auto ) to be able to compare, as well as a% width with a defined width. Display also in "All 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>