Style:Display and Visibility errors ?

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>

see the code I am using visibility and display for hidden or showing rows but both have errors

Visibility hide the row but do not removed space, like "display:none",
I can use "display" but it is not working properly with safari and Firefox.

Please give me solution for it. My requirement is:-

Hide the row and also removed its space on all browsers.

Answer 1

display: none works fine to remove a table row in all browsers.

However what you have is display: block, which makes no sense. A ‘block’ element is like a <div>; you can't sensibly put one directly inside a <table>.

A table row that is not removed by display: none should have the display value table-row. However in IE only, before version 8, it is display: block instead. That means if you are switching between shown and removed with JavaScript, you would have to sniff the browser to choose whether to set display: table-row or display: block when re-showing the row.

In that case it is much easier to do it indirectly instead, by adding and removing row.className= 'hidden' and using a stylesheet rule to .hidden { display: none; }. This way requires no browser workarounds.

Answer 2

It is a bit vague what you are after but display:none hides the rows and does not save space on all IE, FF and (as far as I know but I dont develop specifically for Safari) Safari.

Answer 3

Change display: block; to display: table-row; for a start, then use display: none; instead of visibility: hidden;.

display:block; applies to div elements and similar, not table rows.

Answer 4

don't use

style="display:block"

Also there are some basic missing in you code

such that dont use

< tr> 

it should be

<tr> 

Use colspan="" in your

Number of td in each row should be matched to work properly. if they don't match you have to adjust it properly using colspan=""

Following is work for me

<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>
        <td>2</td>  
        <td>2</td>  
        <td>2</td>  
        <td>2</td>  
        <td>2</td>  
    </tr>
    <tr style="display:none">
        <td>3</td>  
        <td>3</td>  
        <td>3</td>  
        <td>3</td>  
        <td>3</td>  
    </tr>
    <tr style="display:none ">
        <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 colspan="5">6</td>  
    </tr>
    <tr>
        <td colspan="5">7</td>  
    </tr>
</table>