CSS and HTML fixed table headers and footers with scrollable TBODY.
Strict & Quirks mode. No JS involved. Auto-resizeable table.
Cloned 3 identical tables allow to use same column layout calculations in all of them. Each table shows header,
body and footer respectively and hides remaining header, tbody, footer in each respectively.
Scroll bar. Each table is surrounded by DIV for vertical scroll bar appearance. "tbodydiv" DIV defines vertical scrollable area size. Additional colun is added to each table to cover the scroll bar space.
Enjoy!
| h0 | h1 | h2 | |
|---|
footer 0 | f1 | f2 oo ooo ooooo | |
|---|
00 000 00000 | 01 | 02 | |
10 | 11 | 12 | |
20 | 21 | 22 | |
30 | 31 | 32 | |
40 | 41 | 42 | |
50 | 51 | 52 | |
60 | 61 | 62 | |
70 | 71 | 72 | |
80 | 81 | 82 | |
90 | 91 | 92 | |
h0 | h1 | h2 | |
|---|
footer 0 | f1 | f2 oo ooo ooooo | |
|---|
00 000 00000 | 01 | 02 | |
10 | 11 | 12 | |
| 20 | 21 | 22 | |
| 30 | 31 | 32 | |
| 40 | 41 | 42 | |
| 50 | 51 | 52 | |
| 60 | 61 | 62 | |
| 70 | 71 | 72 | |
| 80 | 81 | 82 | |
| 90 | 91 | 92 | |
NOTE:
- FF only: TABLE border="1" leads to footer TRs shown as 1 pixel instead of hiding. Solution: make borders in
CSS instead.
- TABLE style="border-collapse:collapse" hides outer and header/footer borders and requires manual tuning of TH ad TD borders in CSS
- Extra DIV is required in hidden(class="invspacer") TH to make line box height shrinkable to zero in WebKit.
TESTED:
PASSED: IE7, FF3, Safari 3.1.1, Chrome 1.0.154.43, Opera 9.60.
FAILED: IE8 Beta2 8.0.6001.18241
BSD type licence.
Copyright (c) 2009, Sasha Firsov, Simulation Works, LLC
All rights reserved.
Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice,
this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
* Neither the name of the Simulation Works, LLC nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.