CSS Settings table TD width Layout

When working with table layouts, it's a headache to control the width of cells, so check the data as follows:

First, table layout table-layout

　　Grammar:
Table-layout:auto | Fixed

　　Value:

Auto: Most browsers use automatic table layout algorithms for table layouts, and the width of tables and cells depends on what they contain.

Fixed: The width of the table and column is set by the width of the table, and the width of a column is determined only by the cell in the first row of the column, and the row following the row of the cell in the current column does not affect the entire column width.

　　* * Note * *

When you use the "fixed" layout method, the entire table can be parsed and rendered after the first row has been downloaded.

This can speed up rendering for the "automatic" automatic layout, but the cell contents will not be adaptive to the current column width.

Any cell that contains overflow content can use the overflow property to control whether content overflow is allowed.

Second, cell text control

　　1.white-space

This property is used to set how to handle whitespace in an element

　　　　Grammar:

White-space:normal | Pre | nowrap | Inherit
　　　　Value:
Normal: Default value; text is automatically wrapped; If you arrive at the container boundary, the content will go to the next line;

Pre: Consecutive whitespace characters will be preserved and will be wrapped when a newline or <br> element is encountered;

line breaks and other whitespace characters will be protected;
This value requires ie6+ or! DOCTYPE statement for Standards-compliant mode support;

If! The DOCTYPE declaration is not specified as Standards-compliant mode, this property can be used, but does not occur, and the result is equivalent to normal;

NoWrap: Consecutive whitespace characters are merged, forcing all text to be displayed in the same line until the text ends or the BR object is encountered;

　　2.word-break

This property specifies how to break a word within a

　　　　Grammar:
Word-break:normal | Break-all | Keep-all

　　　　Value:

Normal: In accordance with the text rules of Asian and non-Asian languages, allow word wrapping;

Break-all: For NON-CJK (Chinese/Japanese/Korean) text, the line can be interrupted in any character;

KEEP-ALL:CJK text keeps on line;

NON-CJK text behaves the same as normal (same as normal for all non-Asian languages; for Chinese, Korean, Japanese, word break is not allowed;

Suitable for non-Asian texts with a small number of Asian texts and a high resolution between them);

iii. Comprehensive processing of table widths

　　1.CSS Fixed table TD width (default display)

1 table{table-layout:fixed;} 2 <  style= "width:63px"></th>3

　　2.CSS Fixed table TD width (one line display)

table{table-layout:fixed;} <  style= "width:63px"></th>

iv. CSS set text forced line wrapping and non-newline writing (out of the question)

　　1. No career change

. Text {overflow:hidden; white-space:normal;}

　　2. Forced line breaking

. Text {word-break: normal;}

Five, this article relates to the link

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break

CSS Settings table TD width Layout