Question: I have a table of content

```
<table>
<thead>
  <tr>
    <th>First Name </th>
    <th>Last Name </th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr class="odd">
    <td>John</td>
    <td>Deo</td>
    <td><a class="personal-checking-more-link">More</a></td>
  </tr>
  <tr><td style="display:none" colspan="3">Description goes for 1st row</td></tr>
  <tr class="odd">
    <td>Jaden</td>
    <td>Aidan</td>
    <td><a class="personal-checking-more-link">More</a></td>
  </tr>
  <tr><td style="display:none" colspan="3">Description goes for 2nd row</td></tr>
</tbody>

```

When I click on **More** then 1st row Description will shown. it shows perfactly but colspan does not work. 

here is my js code

```
personalChecking = function () {
        $('a.personal-checking-more-link').click(function() {
            $(this).parent().parent().next().toggle('slow');
        });

    }
$(document).ready(personalChecking);

```

Thanks in advance

Answer: 
This is the problem with 'display:block'

Please refer the below link
<http://thedesignspace.net/MT2archives/000376.html#.UUrg3FfCd1u>

If you are hiding tr, then use 'display:table-row' instead of 'display:block' to display that tr,

If you are hiding td, then use 'display:table-cell' instead of 'display:block' to display that td
The problem appears to be in the style applied when showing an element. It's setting the style to "display:block" which appears to be messing with colspan. Here are some workarounds that I came up with, but they're not perfect.

This one has jerky annimation:

```
personalChecking = function () {
    $('a.personal-checking-more-link').click(function() {
        $(this).parent().parent().next().toggle('slow', function() {
            if($(this).css('display') == 'block')
            {
                $(this).css('display', '');
            }               
        });
    });
}

```

And this one has no annimation at all:

```
personalChecking = function () {
    $('a.personal-checking-more-link').click(function() {
        var nextRow = $(this).parent().parent().next();
        if(nextRow.css('display') == 'none')
        {
            nextRow.css('display','');
        }
        else
        {
            nextRow.css('display', 'none');
        }
    });
}

```