Search This Blog

Finalized-Fully optimized Table- V04 -Dynamically width Adjusted-Multi-trims-comparative Table

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

This example uses position:sticky on the th elements in the thead, 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 browser smaller to see fixed first column.

BMW x5-Specs:-(Sample Data) 2023 BMW X5 H1(Prev.Mod) 2024 BMW X5 H2(Curr.Mod) 2025 BMW X5 H3(Ann.Mod)
First top Column(Sample Data) Cell conte-Cell content test Cell content longer Cell content longer
Transmission Type(Sample Data) 46.5 lb-ft. at 11,500 rpm (claimed) Cell content longer Cell content longer
Left Column(Sample Data) Cell content Cell content longer 46.5 lb-ft. at 11,500 rpm (claimed)
Rear/Front Suspension high yyv(Sample Data) 119 hp at 14,250 rpm (claimed) Cell content longer Cell content longer
Battery Capacity(Sample Data) Cell content-AWD SUV-1.3ltr 4cyl.1v Cell content longer Cell content longer
C02 Emissions WMTC(Sample Data) 17M/CxMT5.50 Cell content longer-1.3ltr 4v/cyl Cell content longer
Left ColumnXXXY(Sample Data) Cell content Cell content longer Cell content longer
Left Column(Sample Data) Cell content Cell content longer Cell content longer
Left Column(Sample Data) Cell content Cell content longer Cell content longer-$cyl 1.3 ltr
BMW x5 trims(Versions) Base Version(Entry) Well-equipped(Mid-level) Fully-Loaded(Top-level)

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

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).
INNER POST ADS 01-Here

Search This Blog

Name

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,
ltr
item
πŸ††πŸ…ΎπŸ†πŸ…»πŸ…³ πŸ…ΈπŸ…½πŸ…΅πŸ…ΎπŸ†πŸ…ΌπŸ…°πŸ†ƒπŸ…ΈπŸ…ΎπŸ…½ πŸ…ΌπŸ…°πŸ…Ά: Finalized-Fully optimized Table- V04 -Dynamically width Adjusted-Multi-trims-comparative Table
Finalized-Fully optimized Table- V04 -Dynamically width Adjusted-Multi-trims-comparative Table
πŸ††πŸ…ΎπŸ†πŸ…»πŸ…³ πŸ…ΈπŸ…½πŸ…΅πŸ…ΎπŸ†πŸ…ΌπŸ…°πŸ†ƒπŸ…ΈπŸ…ΎπŸ…½ πŸ…ΌπŸ…°πŸ…Ά
https://www.worldinformationmag.com/2024/01/sample-table-v04-single-model.html
https://www.worldinformationmag.com/
https://www.worldinformationmag.com/
https://www.worldinformationmag.com/2024/01/sample-table-v04-single-model.html
true
5686419625491451997
UTF-8
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