Submit your widget

jQuery and CSS3 Products Comparison Table

Created about a year ago   Views 8296   downloads 964    Author codyhouse
jQuery and CSS3 Products Comparison Table
View DemoDownload 130.8 KB
21
Share |

A responsive table to compare and filter through multiple products.

The HTML structure is composed of a section.cd-products-comparison-table wrapping a <header> and a div.cd-products-table. The <header> contains the action buttons (filter and reset) while the div.cd-products-table is used to wrap the div.features (product features list) and the div.cd-products-wrapper. The latter contains an unordered list (ul.cd-products-columns) for the product list items.

<section class="cd-products-comparison-table">
	<header>
		<h2>Compare Models</h2>
 
		<div class="actions">
			<a href="#0" class="reset">Reset</a>
			<a href="#0" class="filter">Filter</a>
		</div>
	</header>
 
	<div class="cd-products-table">
		<div class="features">
			<div class="top-info">Models</div>
			<ul class="cd-features-list">
				<li>Price</li>
				<li>Customer Rating</li>
				<li>Resolution</li>
				<!-- other features here -->
			</ul>
		</div> <!-- .features -->
		
		<div class="cd-products-wrapper">
			<ul class="cd-products-columns">
				<li class="product">
					<div class="top-info">
						<div class="check"></div>
						<img src="../img/product.png" alt="product image">
						<h3>Sumsung Series 6 J6300</h3>
					</div> <!-- .top-info -->
 
					<ul class="cd-features-list">
						<li>$600</li>
						<li class="rate"><span>5/5</span></li>
						<li>1080p</li>
						<!-- other values here -->
					</ul>
				</li> <!-- .product -->
 
				<li class="product">
					<!-- product content here -->
				</li> <!-- .product -->
 
				<!-- other products here -->
			</ul> <!-- .cd-products-columns -->
		</div> <!-- .cd-products-wrapper -->
		
		<ul class="cd-table-navigation">
			<li><a href="#0" class="prev inactive">Prev</a></li>
			<li><a href="#0" class="next">Next</a></li>
		</ul>
	</div> <!-- .cd-products-table -->
</section> <!-- .cd-products-comparison-table -->

Adding style

The .cd-products-wrapper has a width of 100% and overflow-x of auto; the .cd-products-columns, instead, has a width equal to the sum of all columns widths and is scrollable (because of its parent overflow property). The div.features has an absolute position and is fixed on the left side of the viewport.

.cd-products-wrapper {
  overflow-x: auto;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
}
 
.cd-products-table .features {
  /* fixed left column - product properties list */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 120px;
}
 
.cd-products-columns {
  /* products list wrapper */
  width: 1200px; /* single column width * products number */
  margin-left: 120px; /* .features width */
}

Read more:https://codyhouse.co/gem/products-comparison-table/

Tag: table