Usage of display:table, display:table-row and display:table-cell_html/css

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

Suggestion: Handwrite the code as much as possible, which can effectively improve the efficiency and depth of learning.

The table and table-cell attribute values of the display attribute are not very commonly used, mainly because the compatibility of browsers is not good, because a considerable number of users are still using the evil IE6 and IE7, but it is not without their development The opportunity to show off, display:table-cell has been briefly introduced in the usage introduction of display:table-cell, but I feel it is not comprehensive enough, so let’s give a comprehensive introduction with a collection of examples.

Basic concepts of three attribute values:

1.table: Specify the object as a table at the block element level, similar to the html tag

2.table-row: Specify the object as a table row, similar to the html tag

3.table-cell: Specify the object as a table cell, similar to the html tag

As can be seen from the basic conceptual definitions of the above attribute values, they can create a table effect created by non-table related tags. The code example is as follows:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> .table{   display:table; } .tr{   display:table-row;   width:200px;   height:200px; } .td{   display:table-cell;   width:100px;   height:100px;   background-color:green;   border:1px solid red; } tr{   width:200px;   height:200px; } td{   width:100px;   height:100px;   background-color:green;   border:1px solid red; } </style> </head> <body> <div class="table">   <div class="tr">     <div class="td"></div>     <div class="td"></div>   </div> </div> <br/> <table cellpadding="0" cellspacing="0">   <tr>     <td></td>     <td></td>   </tr> </table> </body> </html>

Copy after login

Judging from the performance of the above code, after adding relevant attribute values to the div, it almost fully has the relevant characteristics of the table. Of course, the above demonstration cannot fully explain the relevant characteristics of the table. The above code only explains the three attribute values. role. At this point, some friends may ask this question: In many practical applications, there is no complete definition of hierarchical relationships like tables, but often only display:table-cell. This is because, if an object has display:table -cell, and its parent element and grandparent element do not define display:table-row and display:table-cell, then these two parent elements will be created anonymously, although there will be no change in appearance. The code example is as follows:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> .parent{   width:200px;   height:200px;   background-color:green;   display:table-cell;   vertical-align:middle; } .children{   width:60px;   height:60px;   background-color:red;   font-size:12px; } </style> </head> <body> <div class="parent">    <div class="children">蚂蚁部落</div> </div> </body> </html>

Copy after login

In the above code, the parent element has display:table-cell, but it does not have the parent element or grandparent element to define display:table-row and display :table-cell. At this time, two objects with this attribute will be created anonymously. Of course, the appearance cannot be seen. The reason why the child elements in the above code can be vertically centered is because the td element has the valign attribute, and vertical-align:middle will only take effect in objects with the valign attribute, so the above code successfully achieves the vertical centering effect. In the position-height div vertical centering effect that is compatible with various browsers, display:table-cell is used in the middle object, and display:table-cell is also declared in its parent object parent. Otherwise, two objects with this attribute will be created anonymously. Object, the size of the middle object will be adaptive according to the content, so that the vertical centering effect cannot be achieved in standard browsers.

The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/504.html

Related labels：

display:table、display:table-row和display:table-cell的用法

source：php.cn

Previous article：Sass: First introduction to the use of Sass and Koala tools_html/css_WEB-ITnose Next article：CSS3 text three-dimensional effect_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn