Rules for calculating the width of HTML table cells

About rendering rules for table widths

Table cell width calculation is mainly divided into two ways: fixed table layout, automatic table layout, this often write CSS people should still know, but we often find that the table column width does not work, or not fixed width rendering is normal, Here's how to calculate the rendering in these two ways.

Set up a few common variables first:

• tablewidth= Table Width =100%
• Tableborderwidth= table left and right border width
• Tdborderwidth= all columns left and right border width and (consolidated border count 1px)
• tdpadding= all the columns around the padding and
• Tdwidth= the width of all columns that define width and
• Tdlength= Number of columns

One, fixed table layout, table add table-layout:fixed

PS: In a fixed table layout, the width of the table column is not related to the column content, only with the table width, column width, table left and right border, column left and right border, the column is filled in about

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

Width of the column for auto (that is, the width of the column that does not define a width, or 0 if the result is negative) = (tablewidth-tableborderwidth-tdborderwidth-tdpadding-tdwidth)/ Tdlength

1. All th width undefined

The width of each column is evenly distributed by the table width

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2ro W2	row3	row4row4row4row4row4row4row4row4	row5ro W5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

2, all th are fixed width, while the sum of all column widths is less than the table width (tableborderwidth+tdborderwidth+tdpadding+tdwidth <= tablewidth)

The width of each column is evenly divided by the total width, and the width of the table is defined by the width

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2ro W2	row3	row4row4row4row4row4row4row4row4	row5ro W5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

3, all th are fixed width, while the sum of all column widths is greater than the table width (tableborderwidth+tdborderwidth+tdpadding+tdwidth > Tablewidth)

The width of each column is the width defined by itself; the width of the table is the sum of all column widths (it will exceed the width of the table definition)

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2ro W2	row3	row4row4row4row4row4row4row4row4	row5ro W5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

4, part of th fixed width, and the width of the column of th width is less than the table width (tableborderwidth+tdborderwidth+tdpadding+tdwidth <= tablewidth)

PS: Column with a dark gray background that defines the width

The width of the column that defines the width is the width defined by itself, and the width of the other columns that do not define the width is the sum of the total width minus the defined width and redistribution

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2ro W2	row3	row4row4row4row4row4row4row4row4	row5ro W5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

5, part th fixed width, and the width of the column of th width is greater than the table width (tableborderwidth+tdborderwidth+tdpadding+tdwidth > Tablewidth)

PS: Column with a dark gray background that defines the width

The actual width of the column that defines the width is its own defined width, the width of the other columns that do not define the width is the sum of the total table width minus the defined width, and the average distribution width is less than 0, then the width of the other columns that do not define the width is 0

Th1	Th2	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1row1row1row1row1row1row1row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4	Row5row5row5row5row5row5row5row5	Row6	Row7row7row7row7row7row7row7row7	Row8row8row8row8row8row8row8row8	Row9row9row9row9row9row9row9row9	Row10row10row10row10row10row10row10

Second, automatic table layout, table settings Table-layout:auto (the default value of this property is auto)

The width of each column is set by the widest content in the cell that does not have a row, and this algorithm is sometimes slow because it needs to access all the columns in the table before determining the final layout

1, all th are undecided minimum width

The width of each column is entirely determined by the content inside.

Th1	Th2	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1row1row1row1row1row1row1row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4	Row5row5row5row5row5row5row5row5	Row6	Row7row7row7row7row7row7row7row7	Row8row8row8row8row8row8row8row8	Row9row9row9row9row9row9row9row9	Row10row10row10row10row10row10row10

2. All th define the minimum width, and the sum of all columns calculated from the content is less than the table width

The width of each column is first calculated based on the content, and cannot be less than the defined minimum width, and the extra width of each column above the average distribution point.

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

3. All th define the minimum width, and the sum of all columns calculated from the content is greater than the table width

The width of each column is first calculated based on the content, and next cannot be less than the defined minimum width

Th1	Th2	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4	Row5	Row6row6row6row6row6row6row6row6	Row7	Row6row6row6row6row6row6row6row6	Row9	Row10row10row10row10row10row10row10

4. Part th defines the minimum width, and the sum of all columns calculated according to the content is less than the table width

PS: Column with a dark gray background that defines the minimum width

The width of each column is first calculated based on the content, followed by the minimum defined width, and the last table renders no less than the width defined by the table itself.

Th1	Th2	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1	Row2	Row3	Row4row4row4row4row4row4row4row4	Row5	Row6	Row7	Row6	Row9	Row10

5. Part th defines the minimum width, and the sum of all columns calculated according to the content is less than the table width

PS: Column with a dark gray background that defines the minimum width

The width of each column is first calculated based on the content, and next cannot be less than the defined minimum width

Th1	Th2	Th3	Th4	Th5	Th6	Th7	Th8	Th9	Th10
Row1	Row2row2row2row2row2row2row2row2	Row3	Row4row4row4row4row4row4row4row4	Row5	Row6row6row6row6row6row6row6row6	Row7	Row6row6row6row6row6row6row6row6	Row9	Row10row10row10row10row10row10row10

Rules for calculating the width of HTML table cells