样式:显示和可见性错误？

Question

< table border="1" cellpadding="0" cellspacing="0" width="100%">  
    < tr>
        < td>1< /td>  
        < td>1< /td>
        < td>1< /td>
        < td>1< /td>
        < td>1< /td>
    </tr>
    < tr style="display:block ">
        < td>2< /td>
        < td>2< /td>
        < td>2< /td>
        < td>2< /td>
        < td>2< /td>
    </ tr>
    < tr style="visibility:hidden ">
        < td>3< /td>
        < td>3< /td>
        < td>3< /td>
        < td>3< /td>
        < td>3< /td>
    < /tr>
    < tr style="visibility:hidden ">
        < td>4< /td>
        < td>4< /td>
        < td>4< /td>
        < td>4< /td>
        < td>4< /td>
    < /tr>
    < tr>
        < td>5< /td>
        < td>5< /td>
        < td>5< /td>
        < td>5< /td>
        < td>5< /td>
    < /tr>
    < tr>
        < td>6< /td>
    < /tr>
    < tr>
        < td>7< /td>
    < /tr>
< /table>

看到代码我使用可见性和显示隐藏或显示行,但都有错误

可见性隐藏行但不删除空格,如"display:none",
我可以使用"display"但它无法正常使用safari和Firefox.

请给我解决方案.我的要求是: -

隐藏行并删除所有浏览器上的空间.

Answer 1

更改display: block;到display: table-row;的一个开始,然后使用display: none;代替visibility: hidden;.

display:block; 适用于div元素和类似的,而不是表行.

Answer 2

display: none 适用于删除所有浏览器中的表行.

不过你拥有的是什么display: block,这没有任何意义.'block'元素就像一个<div>; 你不能明智地把一个直接放在一个<table>.

未删除的表行display: none应具有显示值table-row.但是,仅在IE中,在版本8之前,它是display: block相反的.这意味着如果您使用JavaScript在显示和删除之间切换,则必须嗅探浏览器以选择是设置display: table-row还是display: block重新显示行.

在这种情况下,通过添加和删除row.className= 'hidden'以及使用样式表规则间接地更方便地执行此操作.hidden { display: none; }.这种方式不需要浏览器解决方法.