The display: block of tr in the table is displayed incorrectly in Firefox

web front end ten thousand and ten 14 years ago (2011-06-13)

The display: block of tr in the table is displayed incorrectly in Firefox

As a general rule, when a cell line needs to be displayed, use the display: block attribute. When it is not needed, use the display: none attribute. This is done in IE browser The display in is normal without any problems.

However, when browsing with Firefox, the layout is disordered. Then I checked the source code through FireBug, debugged it, and found that the display: block attribute is responsible for it.

1. When the table has multiple columns, the content width of the row with the attribute "display: block" is only the same as the width of the first column, that is, no matter what the attribute value of colspan is, the space of the remaining columns will not be parsed.
2. When the same row repeatedly switches between the "display: none;" and "display: block;" states, the bottom of the table will continue to generate extra blank space, causing distortion of the page layout.

resolvent:
1. Use the display: table row attribute to debug. It is normal under FireFox, but IE does not support changing the attribute. What should I do? Use JS to judge, and then make compatibility.
2. Another very simple and feasible method is to use the display: '' attribute to display without adding anything after it. It is strange that it is compatible with Firefox and IE.