Responsive Multi-Column Table with Links

Developer
James Zedd
Size
4,956 Kb
Views
20,240
  1. Responsive Multi-Column Table with Links Previews
  2. Responsive Multi-Column Table with Links HTML Codes
  3. Responsive Multi-Column Table with Links CSS Codes
  4. Responsive Multi-Column Table with Links JS Codes

How do I make an responsive multi-column table with links?

What is a responsive multi-column table with links? How do you make a responsive multi-column table with links? This script and codes were developed by James Zedd on 30 September 2022, Friday.

Responsive Multi-Column Table with Links Previews
IQ Test

Responsive Multi-Column Table with Links - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Multi-Column Table with Links</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tableSS"> <div class="table-headSS"> <div class="columnSS" data-label="Products">Products</div> <div class="columnSS" data-label="Description">Description</div> <div class="columnSS" data-label="By Brand">By Brand</div> <div class="columnSS" data-label="Specs">Specs</div> <div class="columnSS" data-label="View Pics">View Pics</div> </div> <!-- ROW 01 --> <div class="rowSS"> <div class="columnSS rowHeader links" data-label="Blade Type 1"> <a href="#">Left - Intermediate</a> <a href="#">Right - Intermediate</a> <a href="#">Left - Senior</a> <a href="#">Right - Senior</a> </div> <div class="columnSS description"> <p>Most popular pattern in the game of hockey.</p> <p>For puck control, quick release, and firing shots.</p> </div> <div class="columnSS brand"> <p><span>Easton: (E3) Hall</span><br />Formally: Sakic, P3</p> <p><span>Bauer: (P92) Ovechkin</span><br />Formally: Backstrom, Naslund</p> <p><span>CCM: (P29) Crosby</span><br />Formally: (P19) Nugent- Hopkins, Ovechkin<br />Pro: P90, H11A, P19</p> <p><span>Warrior: (W03) Backstrom</span><br />Formally: Henrique, Kopitar, Draper, Toews</p> </div> <div class="columnSS specs"> <ul> <li>Curve: Mid</li> <li>Lie: 5.5 - 6</li> <li>Depth: 12mm 1/2"</li> <li>Face: Open</li> <li>Toe: Round</li> </ul> </div> <div class="tabs"> <ul class="mobile-tabs"> <li data-class="description">Description</li> <li data-class="brand">By Brand</li> <li data-class="specs">Specs</li> </ul> </div> <div class="columnSS pics"> <a href="#" class="view-img">View Images</a> </div> </div> <!-- ROW 02 --> <div class="rowSS"> <div class="columnSS even rowHeader links" data-label="Blade Type 2"> <a href="#">Left - Intermediate</a> <a href="#">Right - Intermediate</a> <a href="#">Left - Senior</a> <a href="#">Right - Senior</a> </div> <div class="columnSS even description"> <p>Prototypical Mid-Blade Pattern.</p> <p>The Second Most Popular Pattern In Hockey.</p> <p>For Stick Handling, Wrist Shots, And Quick Release.</p> </div> <div class="columnSS even brand"> <p><span>Easton: (E36) Mid Blade</span><br />Formally: (E7) Iginla</p> <p><span>Bauer: (P88) Kane</span><br />Formally: Lindros</p> <p><span>CCM: (P40) Mackinnon</span><br />Formally: Hossa, Perron, Thornton<br />Pro: P40, H40, P80 = Bauer's P88 And P17 = Easton's Iginla</p> <p><span>Warrior: (W88) Zetterberg</span></p> </div> <div class="columnSS even specs"> <ul> <li>Curve: Mid</li> <li>Lie: 5.5 - 6</li> <li>Depth: 12mm 1/2"</li> <li>Face: Open</li> <li>Toe: Round</li> </ul> </div> <div class="tabs"> <ul class="mobile-tabs"> <li data-class="description">Description</li> <li data-class="brand">By Brand</li> <li data-class="specs">Specs</li> </ul> </div> <div class="columnSS even pics"> <a href="#" class="view-img">View Images</a> </div> </div> <!-- ROW 03 --> <div class="rowSS"> <div class="columnSS rowHeader links" data-label="Blade Type 3"> <a href="#">Left - Intermediate</a> <a href="#">Right - Intermediate</a> <a href="#">Left - Senior</a> <a href="#">Right - Senior</a> </div> <div class="columnSS description"> <p>The most modest amount of curve. </p> <p>Allows for more blade on the ice.</p> <p>For handling the puck, and shooting forehand and back.</p> </div> <div class="columnSS brand"> <p><span>Easton: (E4) Cammalleri</span><br />Formally: (P4), Zetterberg</p> <p><span>Bauer: (PM9) Stamkos</span><br />Formally: Malkin, Modano</p> <p><span>CCM: (P42) Duchene</span><br />Formally: Couturier, Hedman</p> <p><span>Warrior: (W01) Lupal</span><br />Formally: Burrows, Savard, Federov</p> </div> <div class="columnSS specs"> <ul> <li>Curve: Mid-Heel</li> <li>Lie: 4.5 - 5</li> <li>Depth: 9mm 3/8"</li> <li>Face: Closed</li> <li>Toe: Round</li> </ul> </div> <div class="tabs"> <ul class="mobile-tabs"> <li data-class="description">Description</li> <li data-class="brand">By Brand</li> <li data-class="specs">Specs</li> </ul> </div> <div class="columnSS pics"> <a href="#" class="view-img">View Images</a> </div> </div> <!-- ROW 04 --> <div class="rowSS"> <div class="columnSS even rowHeader links" data-label="Blade Type 4"> <a href="#">Left - Intermediate</a> <a href="#">Right - Intermediate</a> <a href="#">Left - Senior</a> <a href="#">Right - Senior</a> </div> <div class="columnSS even description"> <p>Most popular heel curve.</p> <p>Has a rounded toe and open face.</p> <p>For shooting off the heel, heavy shots, going top shelf, and for deflections.</p> </div> <div class="columnSS even brand"> <p><span>Easton: (E6) Parise</span><br />Formally: Drury</p> <p><span>Bauer: (P91A) Staal</span></p> <p><span>CCM: (P15) Jones</span><br />Formally: (P15) Galchenyuk, (P36) Phaneuf<br />Pro: P15, H15, H19</p> <p><span>Warrior: (W05) Granlund</span>Formally: Kovalev</p> </div> <div class="columnSS even specs"> <ul> <li>Curve: Heel</li> <li>Lie: 5 - 6</li> <li>Depth: 1/2"</li> <li>Face: Open Wedge</li> <li>Toe: Round</li> </ul> </div> <div class="tabs"> <ul class="mobile-tabs"> <li data-class="description">Description</li> <li data-class="brand">By Brand</li> <li data-class="specs">Specs</li> </ul> </div> <div class="columnSS even pics"> <a href="#" class="view-img">View Images</a> </div> </div> <!-- ROW 05 --> <div class="rowSS"> <div class="columnSS rowHeader links" data-label="Blade Type 5"> <a href="#">Left - Intermediate</a> <a href="#">Right - Intermediate</a> <a href="#">Left - Senior</a> <a href="#">Right - Senior</a> </div> <div class="columnSS description"> <p>Harder to find pattern.</p> <p>Similar to blade 1 with a square toe.</p> <p>For quick release, shooting accuracy, and for digging in corners. </p> </div> <div class="columnSS brand"> <p><span>Easton: (E9) Heatley</span></p> <p><span>Pro Bauer: (P12) Mid Curve</span></p> <p><span>CCM: (P45) Tavaras<br />and P(38) Datsyuk</span></p> <p><span>Warrior: (W12) Pavelski</span><br />Formally: Wisniewski</p> </div> <div class="columnSS specs"> <ul> <li>Curve: Mid</li> <li>Lie: 5 - 6</li> <li>Depth: 12mm 1/2"</li> <li>Face: Open</li> <li>Toe: Square</li> </ul> </div> <div class="tabs"> <ul class="mobile-tabs"> <li data-class="description">Description</li> <li data-class="brand">By Brand</li> <li data-class="specs">Specs</li> </ul> </div> <div class="columnSS pics"> <a href="#" class="view-img">View Images</a> </div> </div> <!-- ROW 06 --> <div class="rowSS"> <div class="columnSS even rowHeader links" data-label="Blade Type 6"> <a href="#">Left - Intermediate</a> <a href="#">Right - Intermediate</a> <a href="#">Left - Senior</a> <a href="#">Right - Senior</a> </div> <div class="columnSS even description"> <p>Fastest growing pattern in hockey.</p> <p>Sometimes considered the elite players curve.</p> <p>For keeping the puck on the toe, quick release, and extreme precision and accuracy.</p> </div> <div class="columnSS even brand"> <p><span>Easton: (P28) Open Toe</span><br />Formally: Kreps</p> <p><span>Bauer: (P28) Giroux<br />and (P14) Toews</span></p> <p><span>CCM: (P28) McDavid<br />and (P46) Landeskog</span><br />Formally: (P46) Bergeron<br />Pro: P49 = Bauer's Toews</p> <p><span>Warrior: (W28) Yakupov</span></p> </div> <div class="columnSS even specs"> <ul> <li>Curve: Toe</li> <li>Lie: 5 - 6</li> <li>Depth: 12mm 1/2"</li> <li>Face: Open</li> <li>Toe: Round</li> </ul> </div> <div class="tabs"> <ul class="mobile-tabs"> <li data-class="description">Description</li> <li data-class="brand">By Brand</li> <li data-class="specs">Specs</li> </ul> </div> <div class="columnSS even pics"> <a href="#" class="view-img">View Images</a> </div> </div> <!-- ROW 07 --> <div class="rowSS"> <div class="columnSS rowHeader links" data-label="Blade Type 7"> <a href="#">Left - Intermediate</a> <a href="#">Right - Intermediate</a> <a href="#">Left - Senior</a> <a href="#">Right - Senior</a> </div> <div class="columnSS description"> <p>A old favorite and very hard to find (Lidstrom).</p> <p>Built for shooting off the heel, for slapshots, and pinpoint passes.</p> </div> <div class="columnSS brand"> <p><span>Easton: (E5) Getzlaf</span><br />Formally: Lidstrom</p> <p><span>Bauer: (P02)</span><br />Formally: Giroux, Kesler, Kronwall, Pronger, Samsonov</p> <p><span>Warrior: (W02) Lidstrom</span><br />Formally: Jovanovski</p> </div> <div class="columnSS specs"> <ul> <li>Curve: Heel</li> <li>Lie: 5.5 - 6</li> <li>Depth: 12mm 1/2"</li> <li>Face: Open</li> <li>Toe: Square</li> </ul> </div> <div class="tabs"> <ul class="mobile-tabs"> <li data-class="description">Description</li> <li data-class="brand">By Brand</li> <li data-class="specs">Specs</li> </ul> </div> <div class="columnSS pics"> <a href="#" class="view-img">View Images</a> </div> </div>
</div><!-- table --> <script src="js/index.js"></script>
</body>
</html>

Responsive Multi-Column Table with Links - Script Codes CSS Codes

body { background: #fff; padding: 30px 100px 100px 100px; font-family: 'Roboto', sans-serif;
}
.tableSS {	display:table;	font-size:16px;	color:#222222;	margin:10px 0;	width: 100%;
}
.table-headSS { display: table-header-group;
}
.table-headSS .columnSS { /* Column inside the table-head */	background:#222222;	color:#ffffff;	border-right:1px solid #fff;	border-bottom: 0;
}
.rowSS .columnSS { font-size: 14px;
}
.table-headSS .column:hover{ /* Column hover inside the table-head */	background:#222222;
}
.rowSS {	display:table-row; /* Defines a table row */
}
.columnSS{	display:table-cell; /* Defines a table cell */	padding:10px 20px;	border-right:1px solid #fff;	background:#EFF0F1;	text-align: center; min-width: 100px !important;
}
.even { background: #E0E0E0 !important;
}
.budget { width: 35%;
}
.budget-description { vertical-align: middle;
}
.budget-description p { display: inline;
}
/* -- Column Specific CSS -- */
.links a { text-decoration: none; display: block; padding: 6px 12px; background-color: #af1f31; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-size: 14px; color: #ffffff; text-align: left; width: 145px; margin-bottom: 10px; transition: all 300ms ease-in-out;
}
.links a:hover { background-color: #c02b3e;
}
.links:before { content: ""attr(data-label)""; display: block; text-align: left; font-family: "Lato", sans-serif; font-size: 18px; font-weight: 700; color: #222222; text-transform: uppercase; margin-bottom: 12px;
}
.brand p { font-style: italic;
}
.brand p span { font-weight: 700; font-style: normal;
}
.specs ul { list-style: none; padding: 0; margin: 0;
}
.specs ul li { margin-bottom: 12px;
}
.tabs { display: none;
}
.pics { position: relative;
}
.view-img { position: absolute; top: 20px; left: 50%; margin-right: -50%; transform: translate(-50%,0%); display: block; text-decoration: none; color: #b9b9b9; background: #ffffff; border: 4px solid #b9b9b9; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; font-family: 'Raleway', sans-serif; font-size: 17px; font-weight: 700; padding: 14px 5px 10px;
}
.view-img:before { content: ""; display: block; font-family: FontAwesome; font-size: 48px; color: #b9b9b9; margin-bottom: 10px;
}
/*
==============
Responsive
==============
*/
@media (max-width: 991px) { .table-headSS { display: none; } .tableSS, .rowSS, .columnSS { display: block; } .rowSS { margin-bottom: 20px; } .columnSS { margin-right: 0; padding: 1px; } .links:before { background-color: #222222; color: #ffffff; width: 100%; padding: 20px 0; text-indent: 20px; } .links a { display: inline-block; padding: 6px 12px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; width: 44%; margin-bottom: 5px; text-align: center; } .pics { clear: both; } .view-img { position: initial; margin-right: 0; transform: none; padding: 10px 0; background: #af1f31; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; font-weight: 400; color: #ffffff; transition: all 300ms ease-in-out; } .view-img:hover { background-color: #c02b3e; } .view-img:before { display: inline; font-size: 18px; margin-bottom: 0; margin-right: 6px; color: #ffffff; } /* -- tabbed content CSS -- */ .description, .brand, .specs { display: none; } .tabs { display: inherit; background-color:inherit; } .tabs ul { list-style: none; margin: 0; padding: 0; text-align: center; display: table; width: 100%; table-layout: fixed; background-color: inherit; } .tabs ul li { display: table-cell; float: none; background-color: #b8c9cf; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; font-weight: 700; padding: 8px 0; } .active-tab { background-color: #989898 !important; } .active-column { background: #989898 !important; } .specs ul li { background-color: transparent; display: block; font-weight: 400; } .specs ul { margin: 14px 0; } .budget { width: initial; } .budget-description p { display: block; }
}

Responsive Multi-Column Table with Links - Script Codes JS Codes

$(document).ready(function(){	var isClone = true;	function cloneInTabs() {	if ($(document).width() < 991 && isClone) {	$( ".tabs" ).each(function() {	$(this).parent().find('.description, .brand, .specs').clone().appendTo($(this)).addClass('active-column');	$(this).find('.description').css('display', 'block');	$(this).find('li[data-class="description"]').addClass('active-tab');	});	isClone = false;	}	};	cloneInTabs();	$('.mobile-tabs li').click(function(){	var	openTab = $(this).parent().parent().find('.' + $(this).data('class'));	openTab.siblings('div').css('display', 'none');	openTab.fadeIn('fast');	$(this).siblings().removeClass('active-tab');	$(this).addClass('active-tab');	});	$(window).resize(function(){	if ($(document).width() < 991) {	cloneInTabs();	isClone = false;	}	});
});
Responsive Multi-Column Table with Links - Script Codes
Responsive Multi-Column Table with Links - Script Codes
Home Page Home
Developer James Zedd
Username james_zedd
Uploaded September 30, 2022
Rating 3
Size 4,956 Kb
Views 20,240
Do you need developer help for Responsive Multi-Column Table with Links?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Zedd (james_zedd) Script Codes
Name
Simple Opt In Form
A Pen by James Zedd
Price
Flex Chart
Simple jQuery Selector Class Change
HTML for IID
Modern Responsive Product Comparison Table
FS Core Values
Simple Package Tier Display
Pure CSS Pop Up Modal
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!