CSS tutorial: The ultimate solution of table nobr

When you are preparing to fully enter the web standard, Are you sometimes overwhelmed by tables? For example, what should I use to replace the "invalid" nobr? Today, let me have an ultimate solution.

Maybe you have already googled white-space: nowrap to implement nobr, which is good, but the key is also table-layout. table-layout has two values that can be set. The default value is auto. auto: the default automatic algorithm. The layout is based on the content of each cell. The table is displayed only after each cell is read and computed. Slow speed.

Fixed: fixed Layout Algorithm. In this algorithm, the horizontal layout is only based on the table width, the table Border width, cell spacing, and column width, but is not related to the table content.

To fix the table layout, we need table-layout: fixed. if there is no fixed and your resolution is reduced to a certain extent, you will find that white-space: nowrap does not take effect.

Tip: To enable the table to adapt to the liquid layout (liquid layout, that is, scalability), we do not recommend that you set the absolute width for the table. It is a good choice to use the relative width, such as the percentage. In addition, set the absolute width of the content (such as the time format) with a relatively fixed width. If the non-fixed content lattice does not set any width, you only need to set the white-space: nowrap, although it will overflow in the case of small resolution, it is more beautiful than the fold, according to some points of view.

Of course, this is not my opinion. If it is something I can control, I would not want white-space: nowrap, so that users can clearly see the content, I think it is more important than appearance.