EXPERIMENT: Table flow
How do I make an experiment: table flow?
This is an experiment to visually create a table with fixed header, but without using the table, td or tr tags. The idea is to have the "flow" going from top to bottom instead of left to right as in traditional tables.. What is a experiment: table flow? How do you make a experiment: table flow? This script and codes were developed by Henri Peetsmann on 09 December 2022, Friday.
EXPERIMENT: Table flow - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>EXPERIMENT: Table flow</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="table-container columns-3"> <div class="table-column time"> <div class="table-row"><span>Time</span></div> <div class="table-row"><span>8:00</span></div> <div class="table-row"><span>8:30</span></div> <div class="table-row"><span>9:00</span></div> <div class="table-row"><span>9:30</span></div> <div class="table-row"><span>10:00</span></div> <div class="table-row"><span>10:30</span></div> <div class="table-row"><span>11:00</span></div> <div class="table-row"><span>11:30</span></div> <div class="table-row"><span>12:00</span></div> <div class="table-row"><span>12:30</span></div> <div class="table-row"><span>13:00</span></div> <div class="table-row"><span>13:30</span></div> <div class="table-row"><span>14:00</span></div> <div class="table-row"><span>14:30</span></div> <div class="table-row"><span>15:30</span></div> <div class="table-row"><span>15:30</span></div> <div class="table-row"><span>16:30</span></div> <div class="table-row"><span>16:30</span></div> <div class="table-row"><span>17:30</span></div> <div class="table-row"><span>17:30</span></div> </div> <div class="table-column"> <div class="table-row"><span>Box 1</span></div> <div class="table-row"><span>a</span></div> <div class="table-row"><span>b</span></div> <div class="table-row"><span>c</span></div> <div class="table-row"><span>d</span></div> <div class="table-row"><span>e</span></div> <div class="table-row"><span>f</span></div> <div class="table-row"><span>g</span></div> <div class="table-row"><span>h</span></div> <div class="table-row"><span>i</span></div> <div class="table-row"><span>j</span></div> <div class="table-row"><span>k</span></div> <div class="table-row"><span>l</span></div> <div class="table-row"><span>m</span></div> <div class="table-row"><span>n</span></div> </div> <div class="table-column"> <div class="table-row"><span>Box 2</span></div> <div class="table-row"><span>a</span></div> <div class="table-row"><span>b</span></div> <div class="table-row"><span>c</span></div> <div class="table-row"><span>d</span></div> <div class="table-row"><span>e</span></div> <div class="table-row"><span>f</span></div> <div class="table-row"><span>g</span></div> <div class="table-row"><span>h</span></div> <div class="table-row"><span>i</span></div> </div> <div class="table-column"> <div class="table-row"><span>Box 3</span></div> <div class="table-row"><span>a</span></div> <div class="table-row"><span>b</span></div> <div class="table-row"><span>c</span></div> <div class="table-row"><span>d</span></div> <div class="table-row"><span>e</span></div> <div class="table-row"><span>f</span></div> <div class="table-row"><span>g</span></div> <div class="table-row"><span>h</span></div> <div class="table-row"><span>i</span></div> <div class="table-row"><span>j</span></div> <div class="table-row"><span>k</span></div> <div class="table-row"><span>l</span></div> <div class="table-row"><span>m</span></div> <div class="table-row"><span>n</span></div> <div class="table-row"><span>o</span></div> <div class="table-row"><span>p</span></div> <div class="table-row"><span>q</span></div> <div class="table-row"><span>r</span></div> <div class="table-row"><span>s</span></div> <div class="table-row"><span>t</span></div> </div>
</div>
</body>
</html>
EXPERIMENT: Table flow - Script Codes CSS Codes
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: arial, sans-serif; font-size: 13px;
}
/* Container */
.table-container { position: relative; width: 600px; padding-left: 100px; background: #eee; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; margin: 50px; /* Not necessary, just for testing */
}
/* Clearfix */
.table-container:after { content: ""; display: table; clear: both;
}
/* Columns */
.table-column { float: left; background: #fff;
}
/* Vertical borders */
.table-column:before{ content: ''; position: absolute; display: block; z-index: 500; top: 0; width: 1px; height: 100%; background: #bbb;
}
.table-column:first-child:after{ content: ''; position: absolute; display: block; z-index: 500; top: 0; right: 0; width: 1px; height: 100%; background: #bbb;
}
/* Rows */
.table-row { height: 25px; line-height: 25px;
}
.table-row span { display: block; text-align: center; padding: 0 5px;
}
/* Compensating position fixed */
.table-row:first-child + .table-row { margin-top: 35px;
}
/* fixed "header" row */
.table-row:first-child { position: fixed; z-index: 200; height: 35px; line-height: 35px; background: none !important; font-weight: bold;
}
.table-row:hover { background: #94c36a; cursor: pointer;
}
/* Columns sizes */
.columns-2 .table-column { width: 50%; }
.columns-3 .table-column { width: 33.3333%;}
.columns-4 .table-column { width: 25%}
/* and so on... */
/* Time column */
.time.table-column { width: 100px; margin-left: -100px; background: #ddd;
}
.time.table-column .table-row span { text-align: left;
}
/* Horizontal borders */
.time.table-column .table-row:before { content: ''; position: absolute; display: block; z-index: 100; width: 100%; height: 1px; background: #bbb;
}
/* Fixed "header" background color */
.time.table-column .table-row:first-child:before { content: ''; position: fixed; display: block; z-index: -1; width: 600px; height: 34px; background: #ddd; border-bottom: solid 2px #999;
}
.time.table-column .table-row:hover { background: none; cursor: default;
}
Developer | Henri Peetsmann |
Username | henripeetsmann |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 2,369 Kb |
Views | 6,072 |
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 |
Full size Vimeo background cover | 2,491 Kb |
Sprite animation experiment | 1,638 Kb |
Sponsor logos | 3,285 Kb |
A Pen by Henri Peetsmann | 3,559 Kb |
Centre aligned responsive header | 2,493 Kb |
Responsive SVG cross-browser | 2,078 Kb |
Price ribbon | 2,089 Kb |
Responsive Moto G mockup | 3,415 Kb |
Search box | 2,434 Kb |
Dynamic ring loader | 3,331 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 |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
Factorial | KeithleySLHS | 1,158 Kb |
Simple CSS loader. | Cabrera | 2,574 Kb |
Weather App 2 | MightyJoeW | 2,877 Kb |
Reading Grid | Tappily | 4,306 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Ocean | Gordonnl | 2,817 Kb |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 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!