CODEWITHSUNDEEP
css
user14887880
user14887880

Reputation:

Why do td and th of the 'table' element behave so abnormally and illogically when you apply to them width in percentage?

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

table,
th,
td {
  width: 100%;
}
<table>

  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>

  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>


</table>

In this example, I am applying width of 100% to table, td and th, and I don't understand the outcome. Why is the first th and td taking all the space while the last th and td are shrunk at the end?

If I use smaller percentage, it works as expected.

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

th,
td {
  width: 100%;
}
<table>

  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>

  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>


</table>

In the next example, I remove the 'table', and only set the width of 100% to th and td, and the result is the same, BUT, if I now start reducing the width in percentage, they behave in a very illogical way. Seemingly the more I increase the percentage, the more the table enlarges. At 10% the table size is clearly larger than half the screen, but at 50%, it's closet to 100px.

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

th,
td {
  width: 50%;
}
<table>

  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>

  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>


</table>

I understand that th and td are child-elements, and the table element has like a family of tags that work together, but still, is there some logic behind this outcome, or is it completely random and illogical, and purely the result of the tag family not working together?

Note that, th and th work as expected if you use width in pixels instead.

Upvotes: 1

Views: 65

Answers (2)

Alohci
Alohci

Reputation: 83126

The table layout algorithm is notorious. The CSS 2.2 spec leaves such situations completely undefined. The only alternative we have is the CSS Table Module Level 3 spec which is a draft clearly marked as "Not ready for implementation", but nonetheless does a better job of trying to describe what browsers actually do currently.

The layout algorithm there is very complicated, too complicated to reasonably be summarized here even if I fully understood it, which I don't. It depends on the interaction of multiple minimum, maximum, and preferred widths over multiple passes to determine the final widths.

However, we can see that in the step intrinsic percentage width of a column, it says that the width of each column uses:

100% minus the sum of the intrinsic percentage width of all prior columns in the table (further left when direction is "ltr" (right for "rtl"))

which clearly favours giving the available width to the earlier columns over the later ones, which is what you see.

Upvotes: 1

ObscurusLux
ObscurusLux

Reputation: 370

Why don't you try changing 100% to some px value? Cuz if you put it 100% like that then the first td and th will just take up all the space and ended up like what you described

Upvotes: 0

Related Questions