Responsive Multi-Column Table with Links
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 - 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; } });
});

Developer | James Zedd |
Username | james_zedd |
Uploaded | September 30, 2022 |
Rating | 3 |
Size | 4,956 Kb |
Views | 20,230 |
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!
Name | Size |
Responsive Advert | 2,354 Kb |
Pure CSS Slide Out Menu | 2,907 Kb |
Simple jQuery Selector Class Change | 1,802 Kb |
A Pen by James Zedd | 2,674 Kb |
HTML for IID | 1,792 Kb |
Pure CSS Toggle Function | 2,566 Kb |
Flex Chart | 4,111 Kb |
Simple Opt In Form | 3,203 Kb |
FS Core Values | 2,020 Kb |
CSS Menu Item Transition and Image Animation | 2,184 Kb |
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!
Name | Username | Size |
Simple DevTools | Deegill | 2,511 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Acorrdian 2016 | Milanodituti | 3,720 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
3D-box | Parthviroja | 2,346 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!