Display: table, display: table-row, and display: table-cell usage,

Display: table, display: table-row, and display: table-cell usage,

Usage of display: table and display: table-cell:

Suggestion: writing code as much as possible can effectively improve learning efficiency and depth.

The table and table-cell attribute values of the display attribute are not very commonly used. The main reason is that the browser is not compatible, because IE6 and IE7 are used by a considerable number of users, however, they do not have the opportunity to expand tables. In the usage introduction of display: table-cell, we have made a brief introduction to display: table-cell, but it is not comprehensive enough, the following is a brief introduction to the Collection instance.

Three basic concepts of attribute values:

1. table: specify an object as a table at the block element level, similar to the html tag <table>.

2. table-row: Specifies an object as a table row, similar to the html tag <tr>.

3. table-cell: Specifies an object as a table cell, similar to html tag <td>.

From the basic concepts and definitions of the preceding attribute values, we can see that they can create a table with non-table-related labels. The code example is as follows:

<! DOCTYPE html> 
According to the code above, after adding the relevant attribute values to div, it almost completely has the table-related features. Of course, the above demonstration does not fully describe the related features of the table, the above Code only describes the role of the three property values. A friend may raise the following question: in many practical applications, there is no complete definition of hierarchies like tables, but usually only display: table-cell. This is because, if an object has a display: table-cell, and its parent and grandfather elements do not define the display: table-row and display: table-cell, then the two parent elements will be created anonymously, although the appearance does not change. The code example is as follows:
<! DOCTYPE html> 
In the code above, the parent element has the display: table-cell, but it does not have the parent element or the grandfather element defines the display: table-row and display: table-cell. At this time, two objects with this attribute will be created anonymously. Of course, the appearance is invisible. In the preceding Code, Child elements can be vertically centered and aligned because the td element has the valign attribute, while vertical-align: middle takes effect only for objects with the valign attribute, therefore, the above Code successfully achieves the vertical center effect. In the vertical center div effect compatible with the location height of Each browser, the display: table-cell is used in the middle object, and its parent object parent also displays the declaration of display: table-cell, otherwise, two objects with this attribute will be created anonymously, and the size of the middle object will be adaptive Based on the content, so that the vertical center effect cannot be achieved in the standard browser.
Original address: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/504.html