Why do I have to specify “width: 100vh” with min-width and max-width already specified equal? Actually, if I remove “width: 100vh”, the table changes. Why does that happen?
Thanks for your reply, but I still don’t understand completely. The width is set as ‘auto’ by default, right? If I set width: auto explicitly, the page shows the same as without width defined.
If you open in browser, you can see that the two elements have the same width. I am confused by the appearance differences between the new example and the original project. And I also try to get some clues from here but don’t figure it out.
You are right, I forgot about default auto (facepalm), but I can understand your confusion now.
The editor you see in the lessons is a virtual one, there is JavaScript/ React working under the surface and checking your inputs.
If you copy the code into an editor like VSCode, the table won’t change when you remove the width of 100vw, like in your test, as it should.
I assume that you need to set the value to 100vw in the lesson for educational purposes, to get familiar with CSS and remember that this confused other students in the past.
Well, though my question has been solved, I think the lesson should be modified. If fixed width of table cell is required, maybe we can try this way but not using undefined properties.
And what about setting the width: 100% for the td element? I was not supposed to behave the sameway that defining it to 100vw? Why max-width seems to not have any effect in this case?