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 04 December 2021, Saturday.

How do I make an responsive multi-column table with links?
  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
Responsive Multi-Column Table with Links Previews

Responsive Multi-Column Table with Links 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 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 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;
		}
	});
});
Do you want hide your ip address?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.