Styling tables with CSS: column width is not correct

Question

table, thead, tbody {
    width: 100%;
}

table, th, tr, td {
    border: 1px solid #000;
    border-collapse: collapse;
}

td {
   width: 25% !important;
}

<table>
    <thead>
        <th>
            <td>ID</td>
            <td>Nome da conta</td>
            <td>Titular</td>
            <td>Saldo</td>
        </th>
    </thead>
    <tbody>
     ...
    </tbody>
</table>

I have a table with four columns and I want them all the same width, i.e., each one occupying 25% of the table.

It happens that my columns are not taking 25% of the table width each, as I assumed they would. Even when I apply the !important.

Check your other web pages styles, because everyting works in plain HTML/CSS as you wrote it — Tadas Stasiulionis
– Tadas Stasiulionis, Commented Apr 27, 2018 at 10:52
Your code is invalid. table > thead > tr > td, not table > thead > th > td — Justinas
– Justinas, Commented Apr 27, 2018 at 10:53
@TadasStasiulionis I did it. In fact, I took all else out and it continues this way. — Edvaldo Silva de Almeida Jr
– Edvaldo Silva de Almeida Jr, Commented Apr 27, 2018 at 10:53

felixmosh · Accepted Answer · 2018-04-27 10:55:02Z

2

You didn't used the semantic tags in a correct manner. In thead tag you must have tr and th as it's children.

Then you can apply {width: 25%;} on the th

table,
thead,
tbody {
  width: 100%;
}

table,
th,
tr,
td {
  border: 1px solid #000;
  border-collapse: collapse;
}

th {
  width: 25% !important;
}

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome da conta</th>
      <th>Titular</th>
      <th>Saldo</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

answered Apr 27, 2018 at 10:55

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paulie_D · Accepted Answer · 2018-04-27 10:52:56Z

1

With table-layout: fixed

table {
  table-layout: fixed;
  width: 100%;
}

table,
th,
tr,
td {
  border: 1px solid #000;
  border-collapse: collapse;
}

td {
  width: 25%;
}

<table>

  <tbody>
    <tr>
      <td>ID</td>
      <td>Nome da conta</td>
      <td>Titular</td>
      <td>Saldo</td>
    </tr>
  </tbody>
</table>

answered Apr 27, 2018 at 10:52

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

1 Comment

felixmosh Over a year ago

This is not related to table-layout: fixed;, but to the fact that you have made the markup correctly.

user9674579 · Accepted Answer · 2018-04-27 10:57:17Z

0

table {
  table-layout: fixed;
  width : 100% ;
}
td {
  text-align : center ;
  width: 25%;
}

<table border = "10">
    <tr>
      <td>Some Text</td>
      <td>Another Text</td>
      <td>Some Another Text</td>
      <td>A Very Long Text</td>
    </tr>
</table>

answered Apr 27, 2018 at 10:57

user9674579

Collectives™ on Stack Overflow

Styling tables with CSS: column width is not correct

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related