How to fix the width of Table Table-Layout: fixed

This article shared everyone about how to fix Table’s width Table-layout: fixed content. Xiaobian feels quite practical, so share it with you to do a reference. Let’s take a look at Xiaobian.

In order to make the table to fill the screen (remaining blank area), the width attribute is often defined as: 100%, and the cell is also defined by percentage.
However, there will be a problem: if the text in the cell exceeds the width limit, it will automatically wrap, the height is automatically increased, resulting in unevenness of the entire form of the form, it is difficult.

Easy to think about the solution is to disable text wrap: White-space: Nowrap; overflow: hidden;

SO Easy! But the effect is still unexpected: text is all in one line, The width is automatically widened, and even the parent container is exceeded, but Overflow has not played!
What is going on? What is the reason for percentage? However, if the static fixed width is used, the flexibility of the table is lost.

So, the ultimate solution is found in not blowing: fixed table width: table-layout: fixed;

By the way, a simple renderings, reference:

Thank you for reading! Regarding how to fix the width of Table Table-layout: Fixed, share it here, I hope that the above can help everyone, let everyone learn more. If you feel that the article is good, you can share it out to let more people see it!

如何固定table的宽度 table-layout: fixed

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment