The calculation method of table cell width is mainly divided into two methods: Fixed table layout, automatic table layout, People who often write CSS should still know this, but we often find that setting the width of the table does not work, or it is rendered without a fixed width. Is this normal? Let’s introduce how these two methods calculate rendering.
First set a few common variables:
tableWidth=Table width=100%
tableBorderWidth=The left and right border width of the table
tdBorderWidth=The sum of the left and right border widths of all columns (the combined border is counted as 1px)
tdPadding=The left and right padding sum of all columns
tdWidth=The width sum of all columns with width defined
tdLength=number of columns
ps: In a fixed table layout, the width of a table column has nothing to do with the column content. It is only related to the table width, column width, table left and right borders, column left and right borders, and column left and right padding
By using a fixed table layout, the user agent can display the table after receiving the first row, i.e. only the width of the first row will work
width is the width of the column with auto (i.e. where width is not defined The width of the column, if the calculation result is negative, it is 0) = (tableWidth-tableBorderWidth-tdBorderWidth-tdPadding-tdWidth)/tdLength
The width of each column Evenly distributed by table width
th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
---|---|---|---|---|---|---|---|---|---|
row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row 7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
The width of each column is evenly distributed through the total width; the width of the table is its defined width
th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 | |||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
---|---|---|---|---|---|---|---|---|---|
row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
ps: Column with dark gray background For columns with a defined width
The width of a column with a defined width is its own defined width, and the width of other columns without a defined width is the total width of the table minus the sum of the defined widths and then evenly distributed
th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
---|---|---|---|---|---|---|---|---|---|
row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row 7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
ps: The columns with dark gray background are columns with defined widths
The actual width of the columns with defined widths is self-defined Width, the width of other columns with no defined width is the total width of the table minus the sum of the defined widths and then evenly distributed. The width after even distribution is less than zero, then Other The width of other columns with no defined width is 0
th2 | th3 | th4 | th5 | th6 | th7 | #th8 | th9 | th10 | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row 7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
th2 | th3 | th4 | th5 | th6 | th7 | #th8 | th9 | th10 | |
---|---|---|---|---|---|---|---|---|---|
row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row 7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
th2 | th3 | th4 | th5 | th6 | th7 | #th8 | th9 | th10 | |
---|---|---|---|---|---|---|---|---|---|
row2row2row2row2row2row2row2row2 | row3 | row4 | row5 | row6 | row7 | row8 | row9 | row10 |
th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 | ##row1 | |
---|---|---|---|---|---|---|---|---|---|
row4row4row4row4row4row4row4row4 | row5 | row6row6row6row6row6row6row6row6 | row7 | row6row6row6row6row6row6row6row6 | row9 | row10row10row10row10row10row10row10 | 4. Part th defines the minimum width, and the sum of all columns calculated based on the content is less than the table width |
##th1
th4 | th5 | th6 | th7 | #th8 | th9 | th10 | row1 | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
row4row4row4row4row4row4row4row4 | row5 | row6 | row7 | row6 | row9 | row10 |
5. Part th defines the minimum width, and the sum of all columns calculated based on the content is less than the table widthps: The columns with dark gray background define the minimum width of the columns Every The column width is first calculated based on the content, and secondly it cannot be less than the defined minimum width
|
The above is the detailed content of A detailed introduction to the calculation rules for table cell width in HTML. For more information, please follow other related articles on the PHP Chinese website!