Calculation rules for the width of html table cells: the width of html table cells

Calculation rules for the width of html table cells: the width of html table cells
Rendering rules for table width

Table cell width is calculated in two ways:Fixed table layout, automatic table layout,This person who often writes css should still know, but we often find that setting the width of a table column does not work, or is it normal to render it with no fixed width, the following describes how to calculate and render the two methods.

Set several common variables first:

• TableWidth = table width = 100%
• TableBorderWidth = the width of the left and right border of the table
• TdBorderWidth = width of the left and right sides of all columns and (the merged border is 1px)
• TdPadding = fill and
• TdWidth = the width and
• TdLength = number of Columns

I. fixed table layout. Add table-layout: fixed to the table.

Ps: in a fixed table layout, the width of a table column is independent of the column content. It is only related to the table width, column width, left and right border of the table, left and right border of the column, and left and right column filling.

By using a fixed table layout, the user agent can display the table after receiving the first row, that is, only the width of the first row will work.

Width: the width of the auto-defined column (that is, the width of the column with undefined width. If the calculation result is negative, it is 0) = (tableWidth-tableBorderWidth-tdBorderWidth-tdPadding-tdWidth)/tdLength

1. All th widths are undefined.

The width of each column is evenly allocated by the table width.

Th1	2nd	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1row1row1row1row1row1row1row1row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4row4	Row5row5row5row5row5row5row5row5row5	Row6	Row7row7row7row7row7row7row7row7row7	Row8row8row8row8row8row8row8row8	Row9row9row9row9row9row9row9row9row9	Row10row10row10row10row10row10row10

2. The width of all th is set, and the sum of the width of all columns is smaller than the table width (tableBorderWidth + tdBorderWidth + tdPadding + tdWidth <= tableWidth)

The width of each column is evenly distributed by the total width. The table width is the defined width.

Th1	2nd	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1row1row1row1row1row1row1row1row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4row4	Row5row5row5row5row5row5row5row5row5	Row6	Row7row7row7row7row7row7row7row7row7	Row8row8row8row8row8row8row8row8	Row9row9row9row9row9row9row9row9row9	Row10row10row10row10row10row10row10

3. The width of all th columns is set, and the sum of the width of all columns is greater than the table width (tableBorderWidth + tdBorderWidth + tdPadding + tdWidth> tableWidth)

The width of each column is its own defined width. The table width is the sum of the width of all columns (beyond the width defined in the table)

Th1	2nd	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1row1row1row1row1row1row1row1row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4row4	Row5row5row5row5row5row5row5row5row5	Row6	Row7row7row7row7row7row7row7row7row7	Row8row8row8row8row8row8row8row8	Row9row9row9row9row9row9row9row9row9	Row10row10row10row10row10row10row10

4. The width of some th columns is set, and the width of the th Column is smaller than the table width (tableBorderWidth + tdBorderWidth + tdPadding + tdWidth <= tableWidth)

Ps: Columns with dark gray backgrounds define columns with width

The width of a column is defined as its own width. The width of other columns without the defined width is equal to the total width of the table minus the sum of the defined width.

Th1	2nd	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1row1row1row1row1row1row1row1row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4row4	Row5row5row5row5row5row5row5row5row5	Row6	Row7row7row7row7row7row7row7row7row7	Row8row8row8row8row8row8row8row8	Row9row9row9row9row9row9row9row9row9	Row10row10row10row10row10row10row10

5. The width of some th columns is determined, and the width of the th Column is later than the table width (tableBorderWidth + tdBorderWidth + tdPadding + tdWidth> tableWidth)

Ps: Columns with dark gray backgrounds define columns with width

The actual width of a column with a defined width is its own width. The width of other columns without a defined width is equal to the total width of the table minus the sum of the defined width, if the width after the average allocation is less than zero, the width of other columns with no defined width is 0.

Th1	2nd	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1row1row1row1row1row1row1row1row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4row4	Row5row5row5row5row5row5row5row5row5	Row6	Row7row7row7row7row7row7row7row7row7	Row8row8row8row8row8row8row8row8	Row9row9row9row9row9row9row9row9row9	Row10row10row10row10row10row10row10

Ii. Automatic table layout. Set table-layout: auto for the table. The default value of this attribute is auto)

The width of each column is set by the widest part of the cell without any rows. This algorithm is sometimes slow because it needs to access all columns in the table before determining the final layout.

1. No minimum width is specified for all th

The width of each column is determined by the content.

Th1	2nd	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1row1row1row1row1row1row1row1row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4row4	Row5row5row5row5row5row5row5row5row5	Row6	Row7row7row7row7row7row7row7row7row7	Row8row8row8row8row8row8row8row8	Row9row9row9row9row9row9row9row9row9	Row10row10row10row10row10row10row10

2. All th defines the minimum width. The sum of all columns calculated based on the content is smaller than the table width.

The width of each column is calculated based on the content, and cannot be smaller than the defined minimum width. The excess width is the average distribution point in each column.

Th1	2nd	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1	Row2row2row2row2row2row2row2row2	Row3	Row4	Row5	Row6	Row7	Row8	Row9	Row10

3. All th defines the minimum width. The sum of all columns calculated based on the content is greater than the table width.

The width of each column is calculated based on the content, and cannot be smaller than the defined minimum width.

Th1	2nd	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4row4	Row5	Row6row6row6row6row6row6row6row6row6	Row7	Row6row6row6row6row6row6row6row6row6	Row9	Row10row10row10row10row10row10row10

4. Some th defines the minimum width. The sum of all columns calculated based on the content is smaller than the table width.

Ps: Columns with dark gray backgrounds define columns with the minimum width

The width of each column is calculated based on the content, and cannot be smaller than the defined minimum width. The rendered width of the table cannot be smaller than the defined width of the table.

Th1	2nd	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1	Row2	Row3	Row4row4row4row4row4row4row4row4row4	Row5	Row6	Row7	Row6	Row9	Row10

5. Some th defines the minimum width. The sum of all columns calculated based on the content is smaller than the table width.

Ps: Columns with dark gray backgrounds define columns with the minimum width

The width of each column is calculated based on the content, and cannot be smaller than the defined minimum width.

Th1	2nd	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4row4	Row5	Row6row6row6row6row6row6row6row6row6	Row7	Row6row6row6row6row6row6row6row6row6	Row9	Row10row10row10row10row10row10row10