Search This Blog

Fully Optimized, All-purpose 3trim Table 1.01 - Sample Data - Responsive

Table with fluid height and width fixed header, footer, and first column using position: sticky

Ducati V4 new in red
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


There may have been several supercars powered by V12 engines and breaking at 200 km / h on an average road, but BMW has gone a different route with super and cool concept cars that made it to production (2007-2011 1).

Search This Blog


Birds,2,Honda,1,images_sLiders,2,post-body-sections,1,sampl,1,Samples,71,sitemaps,2,Sliders,51,Tables,72,Tabs,67,Top Bikes,1,
πŸ††πŸ…ΎπŸ†πŸ…»πŸ…³ πŸ…ΈπŸ…½πŸ…΅πŸ…ΎπŸ†πŸ…ΌπŸ…°πŸ†ƒπŸ…ΈπŸ…ΎπŸ…½ πŸ…ΌπŸ…°πŸ…Ά: Fully Optimized, All-purpose 3trim Table 1.01 - Sample Data - Responsive
Fully Optimized, All-purpose 3trim Table 1.01 - Sample Data - Responsive
πŸ††πŸ…ΎπŸ†πŸ…»πŸ…³ πŸ…ΈπŸ…½πŸ…΅πŸ…ΎπŸ†πŸ…ΌπŸ…°πŸ†ƒπŸ…ΈπŸ…ΎπŸ…½ πŸ…ΌπŸ…°πŸ…Ά
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content