In order to allow the table to fill the screen (the remaining blank area), the width attribute is often defined as 100%, and the cell is also defined as a percentage.
But this will cause problems: if the text in the cell exceeds the width limit, it will automatically wrap lines and increase the height, resulting in the uneven style of the whole table, which is very ugly.
It’s easy to think of a solution: disable text wrapping: white space: nowrap; overflow: hidden;
So easy! But the effect is still unexpected: the text is displayed in one line, the width is widened automatically, even beyond the parent container, overflow has no effect at all!
What’s going on? Why percentage? But if you use static fixed width, you lose the flexibility of the table.
Thus, it is easy to find the ultimate solution: fixed table width: table layout: fixed;
By the way, I made a simple rendering, which is as follows: