tr:nth-child(odd){
height:70px
background-color:#0f9
}
tr:nth-child(even){
display:none
height:60px
background-color:#c3c
}
</style>
<script>
window.onload=function(){
var trs=document.getElementsByTagName("tr")
for(var i=0i<trs.lengthi+=2){
(function(i){
trs[i].onclick=function(){
for(var j=0j<trs.lengthj+=2){
if(j==i){
if(trs[j+1].style.display!="table-row"){
trs[j+1].style.display="table-row"
}else{
trs[j+1].style.display="none"
}
}else{
trs[j+1].style.display="none"
}
}
}
})(i)
}
}
</script>
<table>
<tr><td>点击本行</td></tr>
<tr><td>1</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>2</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>3</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>4</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>5</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>6</td></tr>
</table>
这个有好几种方式的一种就是控制大框架的高度，超出隐藏，然后Js是控制点击显示的时候高度自适应，
点击隐藏的时候高度为设置的高度。
大致写下jquery吧 看下应该不难
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
<li>第五行</li>
</ul>
<input type="button" value="显示"><input type="button" value="隐藏">
第一种
<script type="text/javascript">
$('input[val="隐藏"]').click(function(){
$('li:first').show().siblings('li').hide()
})
$('input[val="显示"]').click(function(){
$('li').show()
})
</script>
第二种
<script type="text/javascript">
$('input[val="隐藏"]').click(function(){
$('ul').css({height:'20px',overflow:'hidden'})
})
$('input[val="显示"]').click(function(){
$('ul').css({height:'auto',overflow:'hidden'})
})
</script>
第三种
<script type="text/javascript">
$('li:first').after('</ul><ul class="ul1">')
$('input[val="隐藏"]').click(function(){
$('ul.ul1').hide()
})
$('input[val="显示"]').click(function(){
$('ul.ul1').show()
})
</script>
简单的方法，具体怎么用还得看具体情况。
