If I set the width of the #nav td to 1%, all elemets from the table are perfectly alligned...

Question

I am not complaining, because that is what I wanted to do but... Why is that happening?
https://code.sololearn.com/WW90l64iZUhc/?ref=app

Answer 1

When the width of td is not set, they do not have a width property, and the content box of each td are as wide as their text content.

After clicking toggle button, width:1% is added to td, note that its parent tr and table are set a width of 100% of #nav, which in turn is 100% of body. This is because % is a relative unit relative to its parent, and so it is forcing its parent and ancestors from not having a width property to a width of 100% of the ancestor which has a width.

Now, if you change the width of #nav from 100% to, say, 200px, you'll see that the table and tr are forced to be 200px too.

https://code.sololearn.com/W1Z9OA7wAynC/?ref=app

Back to your question, about why four 1% looks like adding up to 100%, sorry I have no idea. I'd like to know why too.

Answer 2

1. One more extra information, I noticed that you are using
<div id="nav">

note that <nav> is preferred because of SEO.

https://html.spec.whatwg.org/multipage/sections.html#the-nav-element

2.

Update: upon asking around, you should use the ARIA role on the nav tag, even though it's implied, because some browsers don't apply it like it they should. So <nav role="navigation">

Reference:
https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/

Answer 3

I can only conclude that the width of tr and table are 100% of #nav when td has a width of 1%.

But I cannot explain why the td are evenly dividing the space of 100% of tr like flexbox or grid system. Let's see what the others say about this.

Answer 4

Alright, as you have marked my answer as best, I feel that I am more obliged to give you something more related and concrete.

After Googling a bit, a 2015 answer points a w3 specification called automatic table layout:

http://www.w3.org/TR/CSS21/tables.html#auto-table-layout

The stackoverflow reference:

https://stackoverflow.com/questions/27846045/understanding-css-table-cell-and-percentage-width

QUOTE

the browser needs to ensure that the table-cells fill up the width of the table (which itself is as wide as its containing block), so it has to expand the cells to occupy as much space within the table as possible.

UNQUOTE

In short, it is specified to display like this, when width 1% on all td (or li being displayed as td), it fills up the space of table (or div being displayed as table).

Answer 5

Thank you Gordon . 😀
That is an great example!