Flexbox table
How do I make an flexbox table?
What is a flexbox table? How do you make a flexbox table? This script and codes were developed by Sander on 18 December 2022, Sunday.
Flexbox table - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox table</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/jbxqev.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-wrapper"> <div class="layout-container"> <div class="row header-row"> <div class="item">Id</div> <div class="item">Name</div> <div class="item">Company</div> <div class="item">Function</div> <div class="item"> </div> </div> <div class="row main-row" data-mainitem="1"> <div class="item">2568</div> <div class="item">John Doe</div> <div class="item">HPU internet services</div> <div class="item">Webdeveloper</div> <div class="item"> <a href="#" title="info" class="btn-item-info"> <i class="fa fa-info"></i> </a> </div> </div> <div class="row info-row" data-subitem="1"> <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque.</div> </div> <div class="row main-row" data-mainitem="2"> <div class="item">5489</div> <div class="item">Jane Doe</div> <div class="item">HPU internet services</div> <div class="item">Secretary</div> <div class="item"> <a href="#" title="info" class="btn-item-info"> <i class="fa fa-info"></i> </a> </div> </div> <div class="row info-row" data-subitem="2"> <div class="item">Vestibulum tempor nec lectus eget pulvinar. Aliquam sit amet risus turpis.</div> </div> </div>
</div> <script src='http://cdn.sanderkeurentjes.com/plugins/velocity/velocity.min.js'></script>
<script src='http://cdn.sanderkeurentjes.com/plugins/velocity/velocity.ui.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flexbox table - Script Codes CSS Codes
.container-wrapper { margin: $defaultSpacing auto;
}
.layout-container { background-color: #fff; border: solid 1px $primaryColor; .row { display: flex; flex-wrap: nowrap; justify-content: space-between; align-content: stretch; &.header-row { background-color: $primaryColor; .item { flex-grow: 2; color: #fff; &:nth-of-type(1) { flex-grow: 1; } &:nth-of-type(2), &:nth-of-type(3) { flex-grow: 3; } } } &.main-row { border-top: solid 1px $lightColor; &:first-of-type { border: 0; } .item { flex-grow: 2; &:nth-of-type(1){ flex-grow: 1; } &:nth-of-type(2), &:nth-of-type(3) { flex-grow: 3; } &:last-of-type { text-align: right; } } } &.info-row { display: none; border-top: dashed 1px $lightColor; background-color: lighten($lightColor, 5%); .item { flex-grow: 1; } } } .item { flex: 1; padding: $defaultSpacing; text-align: left; color: $darkColor; }
}
.btn-item-info { display: inline-block;
}
.fa { margin-left: 10px;
}
Flexbox table - Script Codes JS Codes
$('.btn-item-info').click(function(e) { e.preventDefault(); var $row = $(this).closest('.row'); var $dataId = $row.attr('data-mainitem'); var $subItem = $('.info-row[data-subitem="' + $dataId + '"]'); if($subItem.is(':hidden')) { $subItem.css('display', 'flex'); } else { $subItem.css('display', 'none'); }
});
Developer | Sander |
Username | skeurentjes |
Uploaded | December 18, 2022 |
Rating | 3 |
Size | 4,118 Kb |
Views | 10,120 |
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 |
Custom input radio buttons | 2,158 Kb |
Sidenavigation | 3,421 Kb |
Search field | 2,280 Kb |
Automatic scroll | 4,042 Kb |
Accordion | 4,280 Kb |
Pure CSS dropdown navigation | 2,355 Kb |
Parallax scrolling background | 3,403 Kb |
Horizontal navigation | 2,183 Kb |
Simple gallery | 3,050 Kb |
Spinning loader | 2,038 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 |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Geildanke typography | Fischaela | 3,249 Kb |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Calculator | Rzencoder | 4,572 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 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!