IE6 IE7 IE8 (Q) workaround for Empty-cells features not supported

Standard reference

The ' Empty-cells ' attribute is applied to the table cell, which controls the border of the empty cell and the background color around it, as described in the specification:

Optional values: Show | Hide | Inherit

Initial value: Show

Elements to apply: Table cells

Inheritance: can Inherit

Percent value: not available/Not applicable

In the detach border model, this feature is used to control the rendering of the border of cell 1 without visual content and the surrounding background color. Empty cells are not considered empty if one or more of the following conditions occur:

Floating content (including empty floating elements);

Normal stream content (including empty elements), except for whitespace characters that can be combined with the ' white-space ' attribute.

If the attribute is value: "Show", then the border and background color of the blank cell will display normally (as with normal cells).
If the attribute is value: "Hide", then the border and background color of the blank cell will not be displayed.

For the ' empty cells ' feature, refer to the CSS 2.1 specification 17.6.1.1 Borders and backgrounds around empty cells:the ' empty-cells ' property and 17.5.1 The description in Table layers and transparency.

Note "1": Empty cells and cells with ' visibility ' attribute values of ' hidden ' are considered to have no visual content.

Problem description

In the detached border model of the table, if the ' Empty-cells ' attribute is set, IE6 IE7 IE8 (Q) will not be able to achieve the results expected by the author.

The impact

This issue will result in a difference in the final rendering effect of empty cells in the table in different browsers.

The affected browser

IE6 IE7 IE8 (Q)

Problem analysis

Analyze and run the following code:

<! DOCTYPE html>
The above code establishes a 3 X 6 table, where the ' border-collapse:separate ' setting indicates that this is a table using the detach border model, and the ' empty-cells:show ' setting indicates that empty cells in the table will display the surrounding background color and border , according to the specification in the description of the two characteristics of the settings 2 is the key to trigger the article to illustrate the problem, in addition to TD TH element border and background color settings are to facilitate from the running results to see the differences between the browsers.

Note "2": In IE8 (S) FireFox Opera Safari Chrome is also the default value for the table element, just to highlight the trigger condition for the issue.

The above code runs in each browser with the following results:


From the results of the run you can see that in IE6 IE7 IE8 (q) 3, the border of the blank cell is not displayed, visible in the IE6 IE7 IE8 (q) Code set in the ' Empty-cells:show ' does not play a role.

The following changes in the code above ' empty-cells:show ' as ' empty-cells:hide ', the results of the operation in each browser are as follows:


From the running results you can see that in IE6 IE7 IE8 (q) 3, the background color of the blank cell does not disappear, and the ' IE7 ' that is set in the IE6 IE8 empty-cells:hide (q) Code does not work.

Note "3": IE6 IE7 IE8 (q) In this example, when the split border model is triggered, the cell border disappears when the Bug, details can refer to the station article: Re1012:ie6 IE7 IE8 (q) Firefox (q) Opera (q) In the separate border model hollow cell border some The condition will disappear
In addition, the IE6 IE7 IE8 (Q) has been developed for a long time, spanning the CSS 1 to CSS 2.0 specification definition period. In essence, their initial development was followed by the original CSS 1 standard, while the ' Empty-cells ' feature was proposed by the CSS 2.0 standard period. So it can be said that IE6 IE7 IE8 (Q) cannot predict the future and provide sufficient support for the ' empty-cells ' feature.

In summary, it can be concluded that IE6 IE7 IE8 (Q) does not support the ' empty-cells ' feature.

Solution Solutions

If you want to achieve the ' empty-cells:show ' effect in each browser, you can add ' &nbsp; ' to the empty cell ；

If you want the effect of ' empty-cells:hide ' in each browser, you can set the background color of the blank cell to the same color as the table background color.