table width

Although the topic is to say the width of the table, but in fact most crazy is that cell td width. Usually developers are also often encounter this problem, so I am looking for information learning algorithm of the width of the table.

table-layout

table-layout defines a table layout algorithm, is auto or fixed.

fixed

Fixed table layout algorithm table layout. Width of the table width has decided that the width of the columns have width of the first row of the cell decision.
First on a Demo .
Analysis, this table is calculated 200px width, the width of the first column is calculated 100px, calculates the width of the second column 20px, calculates the width of the third and fourth columns of 33px. Third column and the fourth column the width of the table is
reduced and a first column and a second column and a left and right width of the cell border width, divided by two to obtain. You might ask, why the "1-3" where td width is not defined yet? Why the third column is calculated? A: Because the definition of td width is not located in the first row, th is located on the first line.

rule

1. If the column element (col), width of the column elements are arranged in the width of the column. demo

2. column element width is auto, or list of elements is not provided (e.g., a first demo), the first row of the cell width is set to the width of the column of.

3. If you do not meet the above two cases, the calculation is determined by the browser.

auto (default value)

Automatic table layout algorithm table layout. Width depends on the form and contents of the cell which contains (or can be cell width is set).

rule

1. Calculating the minimum cell width

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

2. Calculating the maximum cell width: desired display content does not completely wrap (wrap displayed irrespective) width

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

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

5. If the cell across columns, minimum column width must be equal to the sum of the minimum cell width across the column of cells. Maximum line width must be equal to the maximum width of the cell cell.

demo

other

However, when the width of the table is auto, even when the table-layout is fixed, it is automatic layout algorithm. demo

reference

1. W3C CSS2.1 Chinese documents

2. MDN

3. CSS The Definitive Guide

This article is reproduced in: ape 2048➬ https://www.mk2048.com/blog/blog.php?id=hhb1h1jchbb