如何只让table显示6行，多余的用滚动条实现。

不知道这个怎么实现？table每行的高度可能不等。网上搜了下，似乎用div的比较多，但这个要求是只显示6行，而且行高不一定。不知道如何实现？指教一下，本人只对基础的有所了解。。。。。。

6 个解决方案

#1

<script>
function window.onload(){
var td=document.getElementById("tab").getElementsByTagName("td")
var num=0
for(var i=0;i<6;i++)
{
num =parseInt(td[i].style.height)+num
}
document.getElementById("all").style.height=num
}
</script>
<div id="all" style=" overflow:auto; width:300px;; border:1px solid #999999" >
<table width="200" border="0" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td  style="height:20px;">1</td>
  </tr>
  <tr>
    <td style="height:30px;">2</td>
  </tr>
  <tr>
    <td style="height:40px;">3</td>
  </tr>
  <tr>
    <td style="height:60px;">4</td>
  </tr>
  <tr>
    <td style="height:30px;">5</td>
  </tr>
  <tr>
    <td style="height:30px;">6</td>
  </tr>
  <tr>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
  </tr>
</table>

</div>

#2

td里面 style="height:30px;"就固定了高度，但是我的td要根据具体的内容来确定高度，有可能这个td只有一行的高度，有可能需要2行

#3

<script>
function window.onload(){
var td=document.getElementById("tab").getElementsByTagName("td")
var num=0
for(var i=0;i<6;i++)
{
num =parseInt(td[i].offsetHeight)+num
}
document.getElementById("all").style.height=num
}
</script>
<div id="all" style=" overflow:auto; width:300px;; border:1px solid #999999" >
<table width="200" border="0" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td  >1<br><br></td>
  </tr>
  <tr>
    <td >2<br></td>
  </tr>
  <tr>
    <td >3<br><br><br><br></td>
  </tr>
  <tr>
    <td >4<br><br><br>e</td>
  </tr>
  <tr>
    <td>5<br><br><br><br></td>
  </tr>
  <tr>
    <td >6</td>
  </tr>
  <tr>
    <td>7</td>
  </tr>
  <tr>
    <td>8<br><br></td>
  </tr>
  <tr>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
  </tr>
</table>

</div>

#4

谢谢楼上的，但是现在有个问题就是我想表格的第一行（标题）不滚动。将div加到table中就无效了。。。不知何解。

#5

<script>
function window.onload(){
var tr=document.getElementById("tab").getElementsByTagName("tr")
var num=0
for(var i=0;i<6;i++)
{num =parseInt(tr[i].offsetHeight)+num}
document.getElementById("all").style.height=num

var td=document.getElementById("tab").getElementsByTagName("tr")[0].getElementsByTagName("td")
var titletd=document.getElementById("tab1").getElementsByTagName("tr")[0].getElementsByTagName("td")
for(var j=0;j<td.length;j++)
{titletd[j].style.width=td[j].offsetWidth}

}
</script>
<div  style="width:300px;border:1px solid #999999">
<div id="title" style="width:300px;">
<table width="280" border="0" cellspacing="0" cellpadding="0" id="tab1">
<tr><td>
id
</td>
  <td>标题</td>
  <td>内容</td>
</tr>
</table>
</div>
<div id="all" style=" overflow:auto; width:300px; " >
<table width="280" border="0" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td  >1<br><br></td>
    <td  >鉴定完毕</td>
    <td  >你很菜</td>
  </tr>
  <tr>
    <td >2<br></td>
    <td >似的似</td>
    <td >撒旦法按时 </td>
  </tr>
  <tr>
    <td >3<br><br><br><br></td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
  </tr>
  <tr>
    <td >4<br><br><br>e</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
  </tr>
  <tr>
    <td>5<br><br><br><br></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td >6</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
  </tr>
  <tr>
    <td>7</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>8<br><br></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>9</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>10</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</div>

#6

table没有滚动条