Responsive table with data-labels

Developer
UX Snippets
Size
2,925 Kb
Views
26,312
  1. Responsive table with data-labels Previews
  2. Responsive table with data-labels HTML Codes
  3. Responsive table with data-labels CSS Codes

How do I make an responsive table with data-labels?

What is a responsive table with data-labels? How do you make a responsive table with data-labels? This script and codes were developed by UX Snippets on 27 October 2022, Thursday.

Responsive table with data-labels Previews
IQ Test

Responsive table with data-labels - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive table with data-labels</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <table class="table table-bordered table-condesed table-collapse"> <thead> <tr> <th>Name</th> <th>Date</th> <th>Address</th> <th>Heading</th> </tr> </thead> <tbody> <tr> <td data-label="Name">Lorem ipsum</td> <td data-label="Date">12/12/2015</td> <td data-label="Address">221B Baker Street</td> <td data-label="Heading">TestName2</td> </tr> <tr> <td data-label="Name">Lorem ipsum</td> <td data-label="Date">12/12/2015</td> <td data-label="Address">221B Baker Street</td> <td data-label="Heading">TestName2</td> </tr> <tr> <td data-label="Name">Lorem ipsum</td> <td data-label="Date">12/12/2015</td> <td data-label="Address">221B Baker Street</td> <td data-label="Heading">TestName2</td> </tr> <tr> <td data-label="Name">Lorem ipsum</td> <td data-label="Date">12/12/2015</td> <td data-label="Address">221B Baker Street</td> <td data-label="Heading">TestName2</td> </tr> </tbody> </table>
</div>
</body>
</html>

Responsive table with data-labels - Script Codes CSS Codes

body { padding: 30px;
}
.table-collapse thead > tr > th.type { text-align: right;
}
@media (min-width: 1025px) { .table-collapse thead > tr > th.type { text-align: center; }
}
.table-collapse.table-striped > tbody > tr > td { border-top: 0;
}
@media (max-width: 767px) { .table-collapse { border: 0; } .table-collapse thead { display: none; } .table-collapse tbody tr { margin-bottom: 10px; display: block; border: 1px solid rgba(66, 139, 202, 0.5); background: white; } .table-collapse tbody th, .table-collapse tbody td { display: block; } .table-collapse tbody td { text-align: right; font-size: 13px; border-top: 0 !important; } .table-collapse tbody td:last-child { border-bottom: 0; } .table-collapse tbody td:before { content: attr(data-label); float: left; font-size: 13px; } .table-collapse .block-column { text-align: left; } .table-collapse .block-column:before { float: none; display: block; margin-bottom: 5px; }
}
Responsive table with data-labels - Script Codes
Responsive table with data-labels - Script Codes
Home Page Home
Developer UX Snippets
Username appirio-ux
Uploaded October 27, 2022
Rating 3
Size 2,925 Kb
Views 26,312
Do you need developer help for Responsive table with data-labels?

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
Weekly Email - 02
SampleColors
A Pen by UX Snippets
Bootstrap Table
Fancyselect Sample
Range Slider
Material Icon toggling
Scroll Progress
Responsive Table
Weekly Email - 01
Create amazing captions 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!