& #39; Fixed & #39; table width, starting from!

To enable the table to fill the screen (the remaining blank area), the width attribute is often defined as 100%, and the cells are also defined as percentages.

But this will cause a problem: 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 and difficult to see the style of the entire table.

The solution is to disable Text wrap: white-space: nowrap; overflow: hidden;

So easy! But the effect is still unexpected: All the text is displayed in one row, and the width is automatically widened, or even exceeds the parent container. overflow does not work at all!

What's going on? Why is the percentage? However, if the static fixed width is used, the flexibility of the table is lost.

The final solution is fixed table width: table-layout: fixed;

By the way, I made a simple one. For more information, see: