table width

Although the question is about the width of the table, the most frustrating thing is actually the width of the cell td. I often encounter this problem during development, so I looked for information to learn the table width algorithm.

table-layout

table-layout defines the table layout algorithm, the value is auto or fixed.

fixed

Use fixed table layout algorithm to layout the table. The width of the table is determined by the width, and the width of the columns is determined by the width of the first row of cells.
Analysis, the calculated width of the table here is 200px, the calculated width of the first column is 100px, the calculated width of the second column is 20px, and the calculated width of the third and fourth columns is 33px. The width of the third and fourth columns is the width of table
minus the sum of the widths of the first and second columns and the width of the left and right borders of the cell, and then divided by 2. Maybe you will ask, why doesn't the td where "1-3" is located define width? Why is the third column calculated? Answer: Because the td that defines width is not located on the first line, th is located on the first line.

Rules

1. If the column element (col) is set, the width of the column element is set to the width of the column.

2. The width of the column element is auto, or if the column element is not set, the width of the first row of cells will be set to the width of the column.

3. If the above two conditions are not met, it will be calculated and determined by the browser.

auto (default value)

Use the automatic table layout algorithm to lay out the table. The width of tables and cells depends on the content they contain (the width can still be set for cells).

Rules

1. Calculate the minimum cell width

   1.1 计算每个单元格的最小内容宽度：内容可以流入多行，但不能超出单元格。
   1.2 如果单元格的width值大于最小可能宽度，则最小单元格宽度为单元格的width值。
   1.3 如果单元格的width值为auto，则最小单元格宽度为为最小内容宽度。

2. Calculate the maximum cell width: display the content completely without wrapping ( The width required when displaying line breaks is not taken into account

3. Calculate the minimum column width: the maximum value of the minimum cell width of all cells in the column

4. Calculate the maximum column width: the maximum value of the maximum cell width of all cells in the column

5. If the cell spans columns, the sum of the minimum column widths must be equal to the spanned column The minimum cell width of the cell. The maximum column width must be equal to the maximum cell width of this cell.

For more table width-related articles, please pay attention to the PHP Chinese website!