Is there a way in CSS (no JS) to have a table of a given height, but with Total and Average lines at the bottom, yet keeping rows (except perhaps a spacer row) normal-sized?
If the are too many rows to fit, there is no extra space between the Total row and the one before it, and the whole table can be scrolled.
I know I can use two tables, but the width of the cells must fit their contents and it would be difficult to get the tables to match.
Display total below HTML/CSS table suggests using tfoot, but all the cells stretch if I increase the table height.
For example:
INTENDED: NOT INTENDED:
--------------- ^ --------------- ^
Creature Value | Creature Value |
--------------- | |
Aardvark 10 | --------------- |
--------------- | Aardvark 10 |
Bluebird 20 | |
--------------- | --------------- |
Chipmunk 30 | Bluebird 20 |
--------------- | |
Dopefish 40 |table --------------- |table
--------------- |height Chipmunk 30 |height
| |
| --------------- |
| Dopefish 40 |
| |
| --------------- |
| Total 100 |
--------------- | |
Total 100 | --------------- |
--------------- | Average 25 |
Average 25 | |
--------------- V --------------- V
Thanks!
