«height: 100%» на таблице делает его выше, чем у родителя

Question

У меня есть таблица, состоящая из строки заголовка, строки нижнего колонтитула и строки между данными.

Все html, body, table имеют высоту 100%. Средний ряд также имеет td с height: 100%, так что он аккуратно заполняет оставшееся пространство: http://jsfiddle.net/9cEhc/2/.

Однако, когда данные не помещаются в средний ряд, я хотел бы показать полосу прокрутки, чтобы таблица сохраняла 100-процентную высоту, и вы можете прокручивать среднюю строку. Как-то это не работает; вместо этого таблица растет в вертикальном направлении (хотя CSS по-прежнему утверждает, что ее высота должна быть 100%), а полоса прокрутки отображается, но отключена (так как нет ничего, чтобы прокручиваться, когда таблица растянулась): http://jsfiddle.net/9cEhc/3/.

Таким образом, таблица установлена ​​на height: 100%, но, хотя тело является, например, 456 пикселей высотой, таблица (прямой ребенок тела) имеет высоту 1368 пикселей, чего не должно быть.

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"> 

Я не знаю, как поставить CELLSPACING в 0 CSS.

EDIT:

Работа демо с полосы прокрутки (Chrome): http://jsfiddle.net/9cEhc/5/

Но вы должны положить вниз 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>