How is CSS table width table-layout:fixed fixed?

If the text in the cell exceeds the width limit, it wraps and automatically increases in height, causing the entire table to be ragged, but you can work around the problem by disabling text wrapping to allow the table to fill the screen (the remaining white space), often defining its width property as: 100%, Cells are also defined by a percentage.

But then there's the problem: if the text in the cell exceeds the width limit, it will wrap automatically, and the height automatically increases, causing the whole table to be uneven and difficult to see.

It is easy to think of a workaround that disables text wrapping: White-space:nowrap; Overflow:hidden;

So easy! But the effect is still unexpected: The text is all displayed on one line, the width is automatically widened, even beyond the parent container, overflow completely does not work!

What's going on? Percentage of why? However, if you use static fixed widths, you lose the flexibility of the table.

Thus, the ultimate solution is found without the power to fly: Fixed table width: table-layout:fixed;

By the way, make a simple, refer to the following: