Home >Web Front-end >HTML Tutorial >Usage of display:table, display:table-row and display:table-cell_html/css_WEB-ITnose
Usage of display:table, display:table-row and display:table-cell_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:222117browse
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 f5d188ed2c074f8b944552db028f98a1.
2.table-row: Specify the object as a table row, similar to the html tag a34de1251f0d9fe1e645927f19a896e8.
3.table-cell: Specify the object as a table cell, similar to the html tag b6c5a531a458a2e790c1fd6421739d1c.
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> 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> 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