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 |
Responsive MacBook retina mockup | 3,228 Kb |
Search box | 2,434 Kb |
Full size Vimeo background cover | 2,491 Kb |
Modified Bootstrap dropdown | 2,534 Kb |
Price ribbon | 2,089 Kb |
A Pen by Henri Peetsmann | 3,559 Kb |
Responsive SVG cross-browser | 2,078 Kb |
Dynamic ring loader | 3,331 Kb |
Sprite animation experiment | 1,638 Kb |
EM Units Experiment | 1,921 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 |
Contact | GanNichiHa | 2,514 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
3d css cube | Semenchenko | 4,578 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
CSS Google Now | Jackmoran | 3,196 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
Toolbar | Onsen | 5,414 Kb |
Parallax scrolling scene | Iharosi | 2,485 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!