Table with fluid height and width fixed header, footer, and first column using position: sticky
 |
| Let's know all about the all-new Ducati Pagani V4 superbike - Table Specs with sample data |
This example uses position: sticky on the th elements in the thread, tfoot, and left column to achieve the fixed effect. Browsers that don't support position: sticky will just get a normal table so no harm done. Resize the browser smaller to see the fixed first column.
| Specifications(Notes here!) | X5 Petro(Basic) | X5 Hybrid-Header longer co(Luxury) | X5 EV+(Ultra Luxury) |
|---|---|---|---|
| Length(text here!) | 177.60bhp | 166.60bhp | 171.60bhp |
| Engine(text here!) | 177.60bhp | 166.60bhp | 171.60bhp |
| Size (in litre=L) | 1.6L | 1.6L | 1.6L |
| Fuel-Type(Petro) | petrol | petrol | gasoline |
| BMW X5 ENgine Specs(text here!) | |||
| Max-Power(@5600rpm) | 177.60bhp | 166.60bhp- cell with more content here! | 171.60bhp |
| Max-torque (@4400rpm) | 144Nm | 144Nm | 155Nm |
| No.of Cylinders (total) | 4 ☑ | 6 | 8 |
| Cylinders (total No.) | 4 ✅ | 6 | 8 |
| Valves per cylinder(text here!) | 4 | 6 | 8 |
| Valve configuration | SOHC | SOHC | SOHC |
| Displacement(cc)(text here!) | 545 | 122 | 124 |
| BMW X5 Fuel COnsumption Data | |||
| Cylinders zzz(total No.) | 4 ✅ | 6 | 8 |
| Cylinders yyy(total No.) | 4 ✅ | 6 | 8 |
| Cylinders XXXX(total No.xx per hr per km | 4 ✅ | 6 | 8 |
| Top Trim levels(Notes here!) | Standard(Entry) | Well-Equipped(Mid) | Ultra-loaded(Top) |
Works in latest versions of modern browsers i.e. Edge, Chrome, Safari/ios and Firefox. Does not work in IE11 or older browsers but no harm done.
All of the other fixed table headers and footers that I've seen are either fixed width or fixed height or need a continuous update with JS and are very janky. This one is very smooth. You would of course need to linearise the data for smaller screens/mobile but that is a question for another day :). See this example for a demo of how to linearise for mobile.
See JS Version
COMMENTS