Responsive Flexbox Table

Developer
Adam Lowenthal
Size
2,701 Kb
Views
26,312
  1. Responsive Flexbox Table Previews
  2. Responsive Flexbox Table HTML Codes
  3. Responsive Flexbox Table CSS Codes

How do I make an responsive flexbox table?

What is a responsive flexbox table? How do you make a responsive flexbox table? This script and codes were developed by Adam Lowenthal on 12 October 2022, Wednesday.

Responsive Flexbox Table Previews
IQ Test

Responsive Flexbox Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Flexbox Table</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="table"> <div class="table__head"> <div class="th"> <div class="td">First Name</div> <div class="td">Last Name</div> <div class="td">E-Mail</div> <div class="td">Phone Number</div> </div> </div> <div class="table__rows"> <div class="tr"> <div class="td">Adam</div> <div class="td">Lowenthal</div> <div class="td">[email protected]</div> <div class="td">516-555-8973</div> </div> <div class="tr"> <div class="td">Jesse</div> <div class="td">Gleisman</div> <div class="td">[email protected]</div> <div class="td">516-555-4685</div> </div> <div class="tr"> <div class="td">Adam</div> <div class="td">Lowenthal</div> <div class="td">[email protected]</div> <div class="td">516-555-8973</div> </div> <div class="tr"> <div class="td">Jesse</div> <div class="td">Gleisman</div> <div class="td">[email protected]</div> <div class="td">516-555-4685</div> </div> <div class="tr"> <div class="td">Adam</div> <div class="td">Lowenthal</div> <div class="td">[email protected]</div> <div class="td">516-555-8973</div> </div> <div class="tr"> <div class="td">Jesse</div> <div class="td">Gleisman</div> <div class="td">[email protected]</div> <div class="td">516-555-4685</div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js'></script>
</body>
</html>

Responsive Flexbox Table - Script Codes CSS Codes

/* Demo Only -- Delete Below */
.container { padding-top: 50px;
}
/* Demo Only -- Delete Above */
.table { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; color: white;
}
.table .th { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; font-weight: 500; font-size: 16px; padding: .5em; background: #e74c3c; text-transform: uppercase; letter-spacing: 1px;
}
.table .th .td { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% / 4); font-size: 14px;
}
.table .tr { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; padding: .5em;
}
.table .tr:nth-child(even) { background: #3498db;
}
.table .tr:nth-child(odd) { background: #2980b9;
}
.table .tr .td { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% / 4); font-size: 14px;
}
@media (max-width: 768px) { .table { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; color: white; } .table__head { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; width: 40%; background: #e74c3c; } .table__head .th { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; font-weight: 500; font-size: 16px; padding: .5em; text-transform: uppercase; letter-spacing: 1px; } .table__head .th .td { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; width: 100%; } .table__rows { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; width: 60%; } .table__rows .tr { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; padding: .5em; } .table__rows .tr:nth-child(even) { background: #3498db; } .table__rows .tr:nth-child(odd) { background: #2980b9; } .table__rows .tr .td { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; width: 100%; }
}
Responsive Flexbox Table - Script Codes
Responsive Flexbox Table - Script Codes
Home Page Home
Developer Adam Lowenthal
Username alowenthal
Uploaded October 12, 2022
Rating 3
Size 2,701 Kb
Views 26,312
Do you need developer help for Responsive Flexbox 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!

Adam Lowenthal (alowenthal) Script Codes
Name
RWP Notifications
Sheet Music Animated Notes
Agile Burndown Chart
Flexbox Responsive Grid Tiles
Spinning Animated Vinyl Record
Google Maps Directions Sidebar
Dashboard Focal Tags
A Pen by Adam Lowenthal
Webster Hall Show Tickets
Blog List -- BnC
Create amazing sales emails 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!