Question: I have created a table <http://jsfiddle.net/vR5B8/>.

```
table  id="resultDetails" class="table-striped" border=1 width="99%" nowrap=0;  cellspacing=0; cellpadding=3><tbody>
            <th colspan="2"><Big>Result Details</Big></th>
                <tr data-depth=0 class="collapse" height=1px >
                    <td width="4%">P</td>
                    <td width="80%">Modules
                    <div class="content">
                         <p>Abc</p>
                    </div>
                    </td>
                </tr>
                <tr data-depth=0 class="collapse" height=1px >
                    <td width="4%">P</td>
                    <td width="80%">Modules 1</td>
                </tr>
                <tr data-depth=0 class="collapse" height=1px >
                    <td width="4%">P</td>
                    <td width="80%">Modules 2</td>
                </tr>
</tbody>

```

 Some of the rows contain additional information which is hidden. If the row contains hidden information, then the height of row is increasing compare to the row which does not contain the hidden information. How to set the common height for all rows. 
Any thoughts ?

Answer: 
Use `display: none` instead of visibility hidden [demo](http://jsfiddle.net/vR5B8/1/)
The table row height will increase dynamically in height if more information is added, but to **hide** an element, use **display: none** and to give a **height** to a row, use **line-height: /\* size \*/**;

```
.content {
    display:none;
}
tr {
    min-height: 20px;
    line-height: 20px;
}

```

Here's the [jsFiddle](http://jsfiddle.net/achudars/vR5B8/2/)