In order to enable the table to fill the screen (remaining blank areas), its width attribute is often defined as: 100%, and cells are also defined by percentages.
But this will cause problems: If the text in the cell exceeds the width limit, it will automatically wrap the line and the height will automatically increase, resulting in uneven styles of the entire table, which is very ugly.
The easy solution to this is to disable text line breaks: white-space:nowrap; overflow:hidden;
So easy! But the effect is still unexpected: the text is displayed on one line, the width is automatically widened, and even exceeds the parent container, overflow has no effect at all!
What's going on? Is the reason for the percentage? But if you use a static fixed width, the flexibility of the table is lost.
So, the ultimate solution was found without any effort: Fixed table width: table-layout: fixed;
By the way, I made a simple rendering, refer to the following: