Layout Secret Weapon #1: The CSS Table Property

CSS display: table Attributes: A powerful tool to solve layout problems

Core points:

• CSS's table attributes are powerful, can solve multiple layout problems and are compatible with all modern browsers. It allows HTML elements to function like table elements, providing a common solution to complex layout and alignment problems.
• CSS table Properties can be used to create contour boxes, simple old-style layouts, and adaptive layouts with content orchestration. It is especially useful in responsive designs, allowing elements to resize and position according to the user's screen size.
• Although the CSS table attribute has many advantages, it also has some limitations. It has less flexibility in creating complex layouts compared to other display properties and does not work well with certain CSS properties such as float and position. However, in many cases, the advantages of using the table attribute outweigh its disadvantages.

At present, Flexbox may be a popular new technology for layout construction. Flexbox’s amazing ability to adapt to available space has left many people looking forward to its possibilities. However, it doesn't solve all layout issues, and there are some issues with its compatibility with older browsers. Flexbox does not currently have a common polyfill (a fallback solution for older browsers) - I only know a polyfill for the 2009 version of IE: Flexie. In many cases, I found that using the often overlooked CSS table display properties can find a simpler solution. These CSS properties are widely supported by all relevant browsers (note that this excludes IE6 and IE7) and can gracefully solve some major and minor layout difficulties.

If you are not completely familiar with this technique, changing the display attribute of a DIV can make it behave like a table or table element.

Wait, use tables to layout? Isn't this good?

One of the hottest web design topics in the early 21st century was the debate about using HTML table code as a layout tool. That's a hack, and it's still a bad practice.

Instead, we use HTML that makes perfect sense here (i.e., DIV, SECTION, HEADER, etc.), just borrowing some useful table representation knowledge from CSS. This is exactly what CSS is designed for, so don't think it's a hack or patch. It's not.

Usage

display: table-cell

In the following example, click the button at the top and you can change the

attribute of the three colored DIVs from display to block: table-cell

[CodePen sample link - replace with actual CodePen link]

You can see how DIVs are arranged horizontally without any

properties, and you can also access some typical table rules (like float). vertical-align

If you need some spacing, note that the classic CSS margin attribute has no effect on the table cell: instead, use border-spacing (it must be applied to container table elements). If you want to use these rules, you can find some comment lines in Codepen.

This technique is very useful for solving many problems that are difficult to solve with other methods.

I have picked out three simple cases, where table display attributes are very valuable.

But first let's look at them:

display attribute

Represented as

table, inline-table

display 属性	呈现为
table, inline-table	table
table-column	col
table-column-group	colgroup
table-row-group	tbody
table-header-group	thead
table-footer-group	tfoot
table-row	tr
table-cell	td
table-caption	caption

table-column

col

table-column-group

colgroup

table-row-group

tbody

table-header-group

thead

table-footer-group

tfoot

table-row

tr

table-cell

td

table-caption

caption

For a truly comprehensive guide to forms and CSS, check out CSS Tricks: [CSS Tricks' Form Guide Link - Replace with the Actual Link]

Case 1. Contour box

I think this is one of the most common problems I deal with: there are some floating boxes with unknown content and you have to make them all have the same height.

I know that Flexbox can easily solve this problem, but table rules can do it too.

Simply apply the display: table (or table-row) property to the container and the display: table-cell property to the internal box. Note that you want to delete any float attributes (otherwise the table-cell attributes will not take effect).

HTML:

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS:

#wrapper {
    display: table;
}
#wrapper div {
    display: table-cell;
}

[CodePen sample link - replace with actual CodePen link]

Case 2. Simple old-style layout

This is a rather outdated example, but I think you might need to deal with it, like I did recently.

A few months ago, I received a graphic layout that was very similar to the following scheme. It needs to be compatible with IE8, and I found the best way to do this is to use CSS table rules:

[CodePen sample link - replace with actual CodePen link]

Case 3. Adaptive layout with content orchestration function

The previous example leads us to a new topic: Is it possible to build an adaptive layout using CSS table rules?

This is not only possible, but we can also perform some content orchestration tasks.

We have seen how to change the display property of two divs from block to table-cell to change their arrangement from vertical to horizontal.

In addition, elements with table-header-group attributes are placed at the top of the table layout. Again, the table-footer-group element will be placed at the bottom, and so on. This can be unexpectedly useful when reformatting responsive layouts.

In the pen below, the title element swaps its position with the navigation element when the window is resized, just change its display attribute to table-header-group.

HTML:

<div id="wrapper">
    <nav></nav>
    <header></header>
    <div id="banner2"></div>
    <footer></footer>
</div>

CSS:

#wrapper, header {
    display: block; /* 我们实际上不需要此规则，因为它默认为此值 */
}

@media (min-width: 48em) {
    #wrapper {
        display: table;
    }
    header {
        display: table-header-group;
    }
}

footer and #banner2 divs also have similar behaviors.

This is a layout plan: the default mobile version on the left, and the desktop version on the right:

This is a running demonstration:

[CodePen sample link - replace with actual CodePen link]

More information about this argument can also be viewed:

• CSS stacking using display:table
• Anti-hero of CSS layout—"display:table"

Conclusion

CSS table Display properties are an underestimated and valuable solution to the size and layout challenges.

While I personally may not choose to use them to build complex layouts, they certainly solve many of the challenges related to the layout part.

FAQs about CSS table Properties

(Frequently asked questions about the CSS table attributes should be added here. The content is similar to the original text, but the wording needs to be adjusted to avoid duplication.)

Please note that all the above CodePen links need to be replaced with the actual CodePen link. I can't access and create a CodePen directly.

The above is the detailed content of Layout Secret Weapon #1: The CSS Table Property. For more information, please follow other related articles on the PHP Chinese website!