The use of the Table-layout property of CSS

Let's talk about it today. The Table-layout property uses the Tablelayout property to display the algorithm rules for table cells, rows, and columns. This article through the example code to introduce the CSS's Table-layout attribute usage, needs the friend to refer the bar

Objective:

Let's talk a little bit about the use of the Table-layout attribute today.

/*eg: Set Table layout algorithm */table{     table-layout:fixed;}

This article keywords: table-layout attribute value, definition and usage, fixed table layout, automatic table layout.

1 Definitions and usage

The Tablelayout property is used to display the algorithm rules for table cells, rows, and columns.

① This property specifies the layout algorithm that is used when the table layout is completed.

② fixed layout algorithm is faster, but the flexibility is not strong.

③ Automatic layout algorithm is slower, but more reflective of the traditional HTML table.

2 Fixed table layout

① allows the browser to layout the table more quickly than the automatic table layout;

② its horizontal layout depends only on the table width, column width, table border width, cell spacing, and the contents of the cell;

③ by using a fixed table layout, the user agent can display the table after the first row has been received.

3 Automatically set table layout

① the width of the column is set by the widest content in the column cell that does not have a broken line;

② This algorithm sometimes takes a long time because it needs to access all the content in the table before determining the final layout.

4table-layout Property value

①automatic: (default) column width is set by cell contents;

②fixed: Column widths are set by table width and column width;

③inherit: Specifies that the value of the Table-layout property should be inherited from the parent element.

Note: All browsers support the Table-layout property.

The attribute value "inherit" is not supported by any version of Internet Explorer (including IE8)!!!

5 theory is better than practice, code goes up

Say more, than to see the code to understand the fast ~ below everybody together to see this chestnut ↓↓↓

(for the convenience of everyone to see the code, CSS and HTML code I wrote in a piece)

<! DOCTYPE html>

After running, you will see the following as shown:


Here I want to explain, perhaps your browser is wide enough, perhaps your cell content is not enough, you may not see the effect of the two, when you need to narrow the browser width or increase the contents of the cell, you will see the difference between the properties of the value of the two ~ ~ ~

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!