Responsive Table
How do I make an responsive table?
A gloriously mobile-friendly table developed by the famous Chris Coyier. . What is a responsive table? How do you make a responsive table? This script and codes were developed by UX Snippets on 27 October 2022, Thursday.
Responsive Table - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="responsive-table"> <table> <thead> <tr> <th class="employer">Employer</th> <th class="start">Start Date</th> <th class="end">End Date</th> <th class="function">Job Function</th> <th class="other">Other</th> <th class="current">Current</th> </tr> </thead> <tbody> <tr> <td class="employer"> <span class="data">ABC Company, Phoenix, AZ</span> </td> <td class="start"> <span class="data">May 2011</span> </td> <td class="end"> <span class="data">Current</span> </td> <td class="function"> <span class="data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</span> </td> <td class="other"> <span class="data"> </span> </td> <td class="current"> <span class="data">Yes</span> </td> </tr> <tr> <td class="employer"> <span class="data">XYZ Company, Goodyear, AZ</span> </td> <td class="start"> <span class="data">Jan 2008</span> </td> <td class="end"> <span class="data">April 2011</span> </td> <td class="function"> <span class="data">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> </td> <td class="other"> <span class="data">Labore et dolore magna aliqua. Ut enim ad minim veniam.</span> </td> <td class="current"> <span class="data">Yes</span> </td> </tr> </tbody> </table>
</div><!--/.responsive-table --> <script src="js/index.js"></script>
</body>
</html>
Responsive Table - Script Codes CSS Codes
html, body { margin: 0; padding: 40px; font: normal 300 13px/1em Helvetica,Arial,"Lucida Grande",sans-serif;
}
.responsive-table table { width: 100%; border-collapse: collapse; margin-bottom: 1em;
}
.responsive-table table thead th { padding: 5px 8px; border: 1px solid #d0d0d0; background: #DDD; text-align: left;
}
.responsive-table table thead th.employer, .responsive-table table thead th.institution { width: 250px;
}
.responsive-table table thead th.start { width: 100px;
}
.responsive-table table thead th.end { width: 100px;
}
.responsive-table table thead th.current, .responsive-table table thead th.state { width: 75px;
}
.responsive-table table thead th.remove { width: 40px;
}
.responsive-table table tbody td { padding: 5px 8px; border: 1px solid #DDD;
}
.responsive-table table tbody td.remove a:hover { text-decoration: none; color: #990000;
}
.responsive-table table a.glyphicon-remove-sign { color: red; font-size: 1.5em;
}
.responsive-table.uploader { margin-top: 2em;
}
.responsive-table.uploader table { width: 400px;
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { .responsive-table input[type="text"], .responsive-table input[type="checkbox"], .responsive-table textarea, .responsive-table a.glyphicon { margin-left: 150px; width: auto; } .responsive-table .data { margin-left: 150px; display: inline-block; } .responsive-table textarea { font-size: 1rem; width: 65%; padding: 0.5rem; } .responsive-table table, .responsive-table thead, .responsive-table tbody, .responsive-table th, .responsive-table td, .responsive-table tr { display: block; } .responsive-table thead tr { position: absolute; top: -9999px; left: -9999px; } .responsive-table tr { border: 1px solid #eee; margin-bottom: 10px; } .responsive-table td { border: none !important; border-bottom: 1px solid #EEE !important; position: relative; padding-left: 50%; } .responsive-table td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } .responsive-table td.employer:before { content: "Employer:"; } .responsive-table td.start:before { content: "Start Date:"; } .responsive-table td.end:before { content: "End Date:"; } .responsive-table td.function:before { content: "Job Function:"; } .responsive-table td.other:before { content: "Other:"; } .responsive-table td.current:before { content: "Current:"; } .responsive-table td.remove:before { content: "Remove:"; } .responsive-table td.institution:before { content: "Institution:"; } .responsive-table td.program:before { content: "Program:"; } .responsive-table td.city:before { content: "City:"; } .responsive-table td.state:before { content: "State:"; } .responsive-table td.country:before { content: "Country:"; } .responsive-table td.file:before { content: "File:"; } .responsive-table td.other, .responsive-table td.function { width: auto !important; }
}
Responsive Table - Script Codes JS Codes
// A gloriously mobile-friendly table developed by the famous Chris Coyier.
Developer | UX Snippets |
Username | appirio-ux |
Uploaded | October 27, 2022 |
Rating | 3 |
Size | 3,938 Kb |
Views | 20,240 |
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 |
Weekly Email - 02 | 3,488 Kb |
Fancyselect Sample | 5,197 Kb |
Appirio Demos | 4,466 Kb |
Animated SVG | 4,028 Kb |
CSS Tooltip Test | 2,281 Kb |
Collapsible table | 3,064 Kb |
Bootstrap Table | 1,735 Kb |
Responsive table with data-labels | 2,925 Kb |
Update for IE11 support | 4,529 Kb |
Sample SVG Icon Font | 2,266 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 |
Single element checkbox | Ivijaygupta | 1,996 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
BenU Maintenance Site | Ksherman | 4,893 Kb |
Simple personal profile | Miroot | 2,856 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!