Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use the display:table attribute in CSS". In the daily operation, I believe that many people have doubts about how to use the display:table attribute in CSS. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubt of "how to use the display:table attribute in CSS". Next, please follow the editor to study!

CSS display:table attribute

When IE8 is released, it will support many new CSS display attribute values, including table-related attribute values: CSS display:table, CSS display:table-row, and CSS display:table-cell, and it is also a mainstream browser that supports these attribute values. It marks the end of complex CSS layout technology and gives a fatal blow to HTML table layout. Eventually, it will be very quick and easy to use CSS layouts to make grids similar to table layouts.

Use CSS forms

CSS tables can solve all the problems we encounter when using absolute positioning and floating positioning for multi-column layout. For example, the CSS declaration of "CSS display:table;" can make a HTML element and its child nodes look like table elements. Using a table-based CSS layout allows us to easily define the boundaries, backgrounds, and other styles of a cell without the semantic problems caused by the use of tabbing tags like table.

Before delving into this approach, let's write an example of an HTML document:

? HTMLheadcontent... ? navigationcolumncontent... ? newsheadlinescolumncontent... ? mainarticlecontent...

This HTML source code meets the requirements of content presentation. First the navigation bar, then the additional bar, and then the content bar. We also need to apply the following CSS styles:

# main {display:table; border-collapse:collapse;} # nav {display:table-cell; width:180px; background-color:#e7dbcd;} # extras {display:table-cell; width:180px; padding-left:10px; border-right:1pxdotted#d7ad7b;} # content {display:table-cell; width:380px; padding-left:10px At this point, the study on "how to use the display:table attribute in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.