Collapsible table

Developer
UX Snippets
Size
3,064 Kb
Views
20,240
  1. Collapsible table Previews
  2. Collapsible table HTML Codes
  3. Collapsible table CSS Codes
  4. Collapsible table JS Codes

How do I make an collapsible table?

Using data attributes with the css content property. What is a collapsible table? How do you make a collapsible table? This script and codes were developed by UX Snippets on 27 October 2022, Thursday.

Collapsible table Previews
IQ Test

Collapsible table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Collapsible table</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://i.icomoon.io/public/9bc07b849f/PTP/style.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container m-top--large">	<table class="table table-responsive">	<thead>	<tr>	<th class="title">Our Home Inspection Packages</th>	<th class="plus">Plus</th>	<th class="premium">Premium</th>	<th class="prestige">Prestige</th>	</tr>	</thead>	<tbody>	<tr>	<td data-label="Inspection Package" class="block-column"><span>Comprehensive Evaluation</span>&nbsp;covering over 1,600 points inside &amp; outside the home</td>	<td data-label="plus"><span class="icm icon-checkmark"></span></td>	<td data-label="premium"><span class="icm icon-checkmark"></span></td>	<td data-label="prestige"><span class="icm icon-checkmark"></span></td>	</tr>	<tr>	<td data-label="Inspection Package" class="block-column"><span>Computerize report</span>&nbsp;printed on site</td>	<td data-label="plus"><span class="icm icon-checkmark"></span></td>	<td data-label="premium"><span class="icm icon-checkmark"></span></td>	<td data-label="prestige"><span class="icm icon-checkmark"></span></td>	</tr>	<tr>	<td data-label="Inspection Package" class="block-column">Clear, consise<span>&nbsp;Executive Summary</span>&nbsp;and<span>&nbsp;color photos</span></td>	<td data-label="plus"><span class="icm icon-checkmark"></span></td>	<td data-label="premium"><span class="icm icon-checkmark"></span></td>	<td data-label="prestige"><span class="icm icon-checkmark"></span></td>	</tr>	</tbody>	</table>
</div> <script src="js/index.js"></script>
</body>
</html>

Collapsible table - Script Codes CSS Codes

@media screen and (max-width: 767px) { .table-responsive { border: 0; } .table-responsive thead { display: none; } .table-responsive tbody tr { margin-bottom: 10px; display: block; border: 1px solid #ddd; background: white; } .table-responsive tbody th, .table-responsive tbody td { display: block; } .table-responsive tbody td { text-align: right; font-size: 13px; border-bottom: 1px solid #ddd; border-top: 0 !important; } .table-responsive tbody td:last-child { border-bottom: 0; } .table-responsive tbody td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } .table-responsive .block-column { text-align: left; } .table-responsive .block-column:before { float: none; display: block; margin-bottom: 5px; }
}
.m-top--large { margin-top: 50px;
}
@media (min-width: 768px) { tbody > tr > td:not(:first-of-type) { width: 130px; }
}

Collapsible table - Script Codes JS Codes

// Smile, maybe you'll get to to destroy a table today!
// Click "View Compiled" button to get the CSS.
// Or just man up and compile your own :p
Collapsible table - Script Codes
Collapsible table - Script Codes
Home Page Home
Developer UX Snippets
Username appirio-ux
Uploaded October 27, 2022
Rating 3
Size 3,064 Kb
Views 20,240
Do you need developer help for Collapsible table?

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!

UX Snippets (appirio-ux) Script Codes
Name
SampleColors
Clone the things
CSS Tooltip Test
Sample SVG Icon Font
Weekly Email - 02
A Pen by UX Snippets
Scroll Progress
CSS Org Chart
Country and State
Email Sample
Create amazing marketing copy 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!