jquery table里的滑动效果问题


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq fade</title>
<style type="text/css">
body{margin:0; padding:0;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">$(document.body).ready(function(){
$('#aform a.detail').each(function(){
$(this).click(function(){
var el=$(this).parents('tr').next();
if (el.is(":hidden")) {
el.slideDown("slow");
el.find('div').css({width:'100%'});
} else {
el.slideUp("slow");
}
return false;
});
});
});
function opendiv(){
if($('#aform div.hidediv').is(":hidden")) {
$('#aform div.hidediv').fadeIn("slow");
} else {
$('#aform div.hidediv').fadeOut("slow");
}
return false;
}

</script>
</head><body>
<form id="aform" name="aform">
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
    <th>id</th>
    <th>name</th>
    <th>email</th>
    <th>title</th>
    <th>operate</th>
    </tr>
<tr>
    <td>1</td>
    <td>name A</td>
    <td>[email protected]</td>
    <td>title A</td>
    <td><a href="" class="detail">Toggle</a></td>
    </tr>
    <tr class="moreinfo" style="display:none;">
    <td colspan="5">
     <div>
         <ul>
             <li>name A</li>
             <li>name A</li>
             <li>name A</li>
             <li>name A</li>
            </ul>
        </div>
    </td>
    </tr>
<tr>
    <td>2</td>
    <td>name B</td>
    <td>[email protected]</td>
    <td>title B</td>
    <td><a href="" class="detail">Toggle</a></td>
    </tr>
    <tr class="moreinfo" style="display:none;">
    <td colspan="5">
     <div>
         <ul>
             <li>name B</li>
             <li>name B</li>
             <li>name B</li>
             <li>name B</li>
            </ul>
        </div>
    </td>
    </tr>
<tr>
    <td>2</td>
    <td>name B</td>
    <td>[email protected]</td>
    <td>title B</td>
    <td><a href="" class="detail">Toggle</a></td>
    </tr>
    <tr class="moreinfo" style="display:none;">
    <td colspan="5">
     <div>
         <ul>
             <li>name B</li>
             <li>name B</li>
             <li>name B</li>
             <li>name B</li>
            </ul>
        </div>
    </td>
    </tr>
<tr>
    <td>2</td>
    <td>name B</td>
    <td>[email protected]</td>
    <td>title B</td>
    <td><a href="" class="detail">Toggle</a></td>
    </tr>
    <tr class="moreinfo" style="display:none;">
    <td colspan="5">
     <div>
         <ul>
             <li>name B</li>
             <li>name B</li>
             <li>name B</li>
             <li>name B</li>
            </ul>
        </div>
    </td>
    </tr>
<tr>
    <td>2</td>
    <td>name B</td>
    <td>[email protected]</td>
    <td>title B</td>
    <td><a href="" class="detail">Toggle</a></td>
    </tr>
    <tr class="moreinfo" style="display:none;">
    <td colspan="5">
     <div>
         <ul>
             <li>name B</li>
             <li>name B</li>
             <li>name B</li>
             <li>name B</li>
            </ul>
        </div>
    </td>
    </tr>
</table>
<a href="" onclick="opendiv();return false;">Toggle</a>
<div class="hidediv" style="display:none;">
     hidden content hidden content hidden content hidden content
    </div>
</form>
</body>
</html>
在FF里tr滑动后,内里的div不是100%width,改变css都不行,又把上一行的td的阔度改变了
在IE里效果都没出来,div是100%width滑动不适合用在table里使用?滑动tr应该怎实现?