桌面上的「高度：100％」使其高於父項

Question

我有一個表格，它由一個標題行，一個頁腳行和一個包含數據的行組成。

全部html, body, table的高度爲100%。中間一排還有一個td和height: 100%，這樣就可以整齊地填充剩餘的空間：http://jsfiddle.net/9cEhc/2/。

但是，當數據不適合中間行，我想顯示一個滾動條，以便表保持其100％的高度，你可以滾動中間行。不知何故，這不起作用;相反，表格在垂直方向上增長（儘管CSS仍然表示它的高度應該是100％），並且滾動條被顯示但被禁用（因爲表格沒有被拉伸，所以沒有任何滾動）：http://jsfiddle.net/9cEhc/3/。

因此，該表被設置爲height: 100%，但是儘管身體是例如456px高，桌子（身體的直接孩子）高1368px，這不應該發生。

HTML：

<table> 
    <tr> 
     <td> 
      header 
     </td> 
    </tr> 
    <tr class="fillup"> 
     <td> 
      <!-- much data that doesn't fit in the row --> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      footer 
     </td> 
    </tr> 
</table> 

CSS：

html, body, table, tbody { 
    width: 100%; 
    height: 100%; 
} 

html, body, table, tbody, tr, td { 
    padding: 0; 
    margin: 0; 
} 

.fillup td { 
    height: 100%; 
    overflow-y: scroll; 
} 

作爲一個方面說明，我希望得到這個工作的Chrome。我不介意其他瀏覽器。

如何防止表格在數據量過大的情況下伸展，而是顯示中間行的滾動條？

Answer 1

嘗試本作的第一個問題（比母大）：http://jsfiddle.net/9cEhc/4/

<table cellpadding="0" cellspacing="0"> 

我不知道如何通過CSS把CELLSPACING爲0。

編輯：

在滾動條（鉻）工作演示：http://jsfiddle.net/9cEhc/5/

但是你需要放下TD內DIV。

<table cellpadding="0" cellspacing="0"> 
    <tr> 
     <td> 
      header 
     </td> 
    </tr> 
    <tr class="fillup"> 
     <td> 
      <DIV STYLE="overflow-y: scroll; overflow-x: no; height: 100%; width: 100%"> 
      list<br>list<br>list<br>list<br>list<br>list<br> 
      list<br>list<br>list<br>list<br>list<br>list<br> 
      ............ // and more 
     </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      footer 
     </td> 
    </tr> 
</table>