Html Code: Table with Expandable Sections

If you have a table with many rows, it is a good idea to break it to different sections. Then you can add an effect to collapse and expand each section, when it is not needed. By this trick you can encapsulate many rows into a compact one!
<!-- this script got from www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link href="https://fonts.googleapis.com/css?family=Assistant:400,700|Poppins:400,500,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<style>
/* Colours */
/* fonts */
body {
  font-family: "Assistant", sans-serif;
}

h1, h2, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
}

h2 {
  font-weight: 700;
}

h3 {
  font-family: "Assistant", sans-serif;
  font-weight: 300;
  text-transform: none;
}

p {
  font-weight: 400;
}

strong {
  font-weight: 700;
}

/* Utilities */
.no-padding {
  padding: 0 !important;
}

/* width */
.container {
  width: 1080px;
}

/* Table Heading */
.pricing-top-heading th {
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
  width: 33%;
}

.pricing-bottom-heading th {
  padding: 0 2%;
  font-weight: 300;
}

.pricing-top-heading .free {
  background-color: #f26b42;
  border: 1px solid #f26b42;
}

.pricing-bottom-heading .free {
  background-color: #f28d6e;
  border: 1px solid #f28d6e;
}

.pricing-top-heading .basic {
  background-color: #58c5c7;
  border: 1px solid #58c5c7;
}

.pricing-bottom-heading .basic {
  background-color: #7fd1d2;
  border: 1px solid #7fd1d2;
}

.pricing-top-heading .pro {
  background-color: #a5c653;
  border: 1px solid #a5c653;
}

.pricing-bottom-heading .pro {
  background-color: #b9d17b;
  border: 1px solid #b9d17b;
}

.pricing-top-heading,
.pricing-bottom-heading {
  color: white;
  height: 90px;
}

table thead th {
  border: 0;
}

/* table */
table {
  width: 100%;
}

.collapsible-section-header {
  background-color: #e1e1e1;
}

.collapsible-section-header a {
  color: #363636;
  font-weight: 700;
  text-decoration: none;
}

.collapsible-section-header a:after {
  content: '\25bc';
  padding-left: 0.5em;
}

.collapsible-section-header a.collapsed:after {
  content: '\25ba';
  padding-left: 0.5em;
}

tbody td {
  background-color: #ededed;
  border: 1px solid #d1d1d1;
  padding: 1.25rem;
}
</style>

<div class="container">
<div class="row">
<table>
<tbody>
<tr>
<td class="collapsible-section-header" colspan="3">
<a data-toggle="collapse" href="#collapse_section_one">Section 1</a>
</td>
</tr>
<tr>
<td class="no-padding" colspan="3">
<div id="collapse_section_one" class="collapse in">
<table style="width:100%">
<tr>
<td>Free 1</td>
<td>Basic 1</td>
<td>Pro 1</td>
</tr>
<tr>
<td>Free 2</td>
<td>Basic 2</td>
<td>Pro 2</td>
</tr>
<tr>
<td>Free 3</td>
<td>Basic 3</td>
<td>Pro 3</td>
</tr>
</table>
</div>
</td>
</tr>

<tr>
<td class="collapsible-section-header" colspan="3">
<a data-toggle="collapse" href="#collapse_section_two">Section 2</a>
</td>
</tr>
<tr>
<td class="no-padding" colspan="3">
<div id="collapse_section_two" class="collapse in">
<table style="width:100%">
<tr>
<td>Free 4</td>
<td>Basic 4</td>
<td>Pro 4</td>
</tr>
<tr>
<td>Free 5</td>
<td>Basic 5</td>
<td>Pro 5</td>
</tr>
<tr>
<td>Free 6</td>
<td>Basic 6</td>
<td>Pro 6</td>
</tr>
</table>
</div>
</td>
</tr>

<tr>
<td class="collapsible-section-header" colspan="3">
<a data-toggle="collapse" href="#collapse_section_three">Section 3</a>
</td>
</tr>
<tr>
<td class="no-padding" colspan="3">
<div id="collapse_section_three" class="collapse in">
<table style="width:100%">
<tr>
<td>Free 7</td>
<td>Basic 7</td>
<td>Pro 7</td>
</tr>
<tr>
<td>Free 8</td>
<td>Basic 8</td>
<td>Pro 8</td>
</tr>
<tr>
<td>Free 9</td>
<td>Basic 9</td>
<td>Pro 9</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script><a target='_blank' href='http://www.htmlbestcodes.com/' style='font-size: 8pt; text-decoration: none'>HTML Codes</a>
If you don't know how to use this code or need more information Click here!
Html Best Codes

Html Code: Table with Expandable Sections

Links
