htmlで固定テーブルに可変データの表示の仕方

質問

htmlで５×４の固定テーブルにJavaScriptで取得したデータを表示させたいですが、
やり方が分かりません。
表示データ分テーブル行を追加表示することはできますが、表示は5行目までで、
6行目はスクロールして表示するようにしたいです。
さらに、5行固定で表示データが3行の場合空白2行も表示させたい。
具体的な方法や参考サイトを教えて下さい。
よろしくお願いします。

回答No.1

AsarKingChang · ベストアンサー

.fix_table {
overflow: auto;
height:XXpx; /* 5行表示できるサイズを記入 */
}
1行が何ピクセルになるかは、フォントのサイズ次第なので、
調整してそれを、
5行スクロールさせたい場所に書けばOKです。
なお、空白は不要です。heightで高さを固定しているので、
0行だとしても指定のサイズで書かれます。
テーブルがDIVで書いているなら、例として
<div class=fix_table>
わああ
</div>　こちらは、スクロールバーが出ずに、空白が追加されて表示される。

<div class=fix_table>
わああ
わああ
わああ
わああ
わああ
わああ
</div>　こっちにだけ、自動的にスクロールバーが出て、操作可能になります。

という感じで、長さによって、自動的に判断されますので、
それでどうぞ～！

お礼

ありがとうございます。できました。