Austin Ziegler
Reputation: 795
How to build a hanging table with CSS Flexbox
I’m trying to build a hanging table-like view using Flexbox. It’s data-driven and in a pop-up modal, and I’d like it to be responsive. What I want to do is pretty easy to do with a <table>, but that’s not going to produce the ability to reshape this in the future if I need to do so.
What I’m trying to build is like this:
┌────────┬──────┬────────────┐
│ │ │ │
│ 2020 │ Q4 │ December │
│ │ │ November │
│ │ │ October │
│ │ │ │
│ │ Q3 │ September │
│ │ │ August │
│ │ │ July │
│ │ │ │
│ │ Q2 │ June │
│ │ │ May │
│ │ │ April │
│ │ │ │
│ │ Q1 │ March │
│ │ │ February │
│ │ │ January │
│ │ │ │
├────────┼──────┼────────────┤
│ │ │ │
│ 2019 │ Q4 │ December │
│ │ │ November │
│ │ │ October │
│ │ │ │
│ │ Q3 │ September │
│ │ │ August │
│ │ │ July │
│ │ │ │
│ │ Q2 │ June │
│ │ │ May │
│ │ │ April │
│ │ │ │
│ │ Q1 │ March │
│ │ │ February │
│ │ │ January │
│ │ │ │
└────────┴──────┴────────────┘
Alternatively, but less usefully, it can be like this:
┌─────────┬──────┬────────────────────────────────┐
│ │ │ │
│ 2020 │ Q4 │ October November December │
│ │ │ │
│ │ Q3 │ July August September │
│ │ │ │
│ │ Q2 │ April May June │
│ │ │ │
│ │ Q1 │ January February March │
│ │ │ │
├─────────┼──────┼────────────────────────────────┤
│ │ │ │
│ 2019 │ Q4 │ October November December │
│ │ │ │
│ │ Q3 │ July August September │
│ │ │ │
│ │ Q2 │ April May June │
│ │ │ │
│ │ Q1 │ January February March │
│ │ │ │
└─────────┴──────┴────────────────────────────────┘
Each of the labels will actually be a <button>.
I’ve built a <table> version of what I’m after as an example (first code example below), and I have a current best effort with Flexbox (second code example below), which isn’t balancing the three columns, but is otherwise close to what I want.
EDIT: As requested, I’ve mode the code in-line.
<table> example showing the structure I want:
table {
width: 90%;
}
td {
width: 33%;
text-align: top;
vertical-align: top;
}<html>
<body>
<table>
<tr>
<td rowspan="12">
<button>2020</button>
</td>
<td rowspan="3">
<button>Q4</button>
</td>
<td><button>January</button></td>
</tr>
<tr>
<td><button>December</button></td>
</tr>
<tr>
<td><button>November</button></td>
</tr>
<tr>
<td rowspan="3">
<button>Q3</button>
</td>
<td>
<button>October</button>
</td>
</tr>
<tr>
<td>
<button>September</button>
</td>
</tr>
<tr>
<td>
<button>August</button>
</td>
</tr>
<tr>
<td rowspan="3">
<button>Q2</button>
</td>
<td><button>July</button></td>
</td>
</tr>
<tr>
<td><button>June</button></td>
</tr>
<tr>
<td><button>May</button>
</tr>
<tr>
<td rowspan="3">
<button>Q1</button>
</td>
<td>
<button>April</button>
</td>
</tr>
<tr>
<td>
<button>March</button>
</td>
</tr>
<tr>
<td>
<button>February</button>
</td>
</tr>
<tr>
<td rowspan="12">
<button>2019</button>
</td>
<td rowspan="3">
<button>Q4</button>
</td>
<td><button>January</button></td>
</tr>
<tr>
<td><button>December</button></td>
</tr>
<tr>
<td><button>November</button></td>
</tr>
<tr>
<td rowspan="3">
<button>Q3</button>
</td>
<td>
<button>October</button>
</td>
</tr>
<tr>
<td>
<button>September</button>
</td>
</tr>
<tr>
<td>
<button>August</button>
</td>
</tr>
<tr>
<td rowspan="3">
<button>Q2</button>
</td>
<td><button>July</button></td>
</td>
</tr>
<tr>
<td><button>June</button></td>
</tr>
<tr>
<td><button>May</button>
</tr>
<tr>
<td rowspan="3">
<button>Q1</button>
</td>
<td>
<button>April</button>
</td>
</tr>
<tr>
<td>
<button>March</button>
</td>
</tr>
<tr>
<td>
<button>February</button>
</td>
</tr>
<tr>
<td rowspan="12">
<button>2018</button>
</td>
<td rowspan="3">
<button>Q4</button>
</td>
<td><button>January</button></td>
</tr>
<tr>
<td><button>December</button></td>
</tr>
<tr>
<td><button>November</button></td>
</tr>
<tr>
<td rowspan="3">
<button>Q3</button>
</td>
<td>
<button>October</button>
</td>
</tr>
<tr>
<td>
<button>September</button>
</td>
</tr>
<tr>
<td>
<button>August</button>
</td>
</tr>
<tr>
<td rowspan="3">
<button>Q2</button>
</td>
<td><button>July</button></td>
</td>
</tr>
<tr>
<td><button>June</button></td>
</tr>
<tr>
<td><button>May</button>
</tr>
<tr>
<td rowspan="3">
<button>Q1</button>
</td>
<td>
<button>April</button>
</td>
</tr>
<tr>
<td>
<button>March</button>
</td>
</tr>
<tr>
<td>
<button>February</button>
</td>
</tr>
<tr>
<td rowspan="12">
<button>2017</button>
</td>
<td rowspan="3">
<button>Q4</button>
</td>
<td><button>January</button></td>
</tr>
<tr>
<td><button>December</button></td>
</tr>
<tr>
<td><button>November</button></td>
</tr>
<tr>
<td rowspan="3">
<button>Q3</button>
</td>
<td>
<button>October</button>
</td>
</tr>
<tr>
<td>
<button>September</button>
</td>
</tr>
<tr>
<td>
<button>August</button>
</td>
</tr>
<tr>
<td rowspan="3">
<button>Q2</button>
</td>
<td><button>July</button></td>
</td>
</tr>
<tr>
<td><button>June</button></td>
</tr>
<tr>
<td><button>May</button>
</tr>
<tr>
<td rowspan="3">
<button>Q1</button>
</td>
<td>
<button>April</button>
</td>
</tr>
<tr>
<td>
<button>March</button>
</td>
</tr>
<tr>
<td>
<button>February</button>
</td>
</tr>
</table>
</body>
</html>Current best effort with Flexbox:
.container {
height: 100%;
width: 100%;
}
.rows {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.year {
border: 1px solid black;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-shrink: 1;
}
.quarter {
flex-grow: 2;
border: 1px dashed blue;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.month {
border: 1px dotted green;
}<html>
<body>
<div class="container rows">
<div class="year">
<button>2020</button>
<div class="rows">
<div class="quarter">
<button>Q4</button>
<div class="month rows">
<button>January</button>
<button>December</button>
<button>November</button>
</div>
</div>
<div class="quarter">
<button>Q3</button>
<div class="month rows">
<button>October</button>
<button>September</button>
<button>August</button>
</div>
</div>
<div class="quarter">
<button>Q2</button>
<div class="month rows">
<button>July</button>
<button>June</button>
<button>May</button>
</div>
</div>
<div class="quarter">
<button>Q1</button>
<div class="month rows">
<button>April</button>
<button>March</button>
<button>February</button>
</div>
</div>
</div>
</div>
<div class="year">
<button>2019</button>
<div class="rows">
<div class="quarter">
<button>Q4</button>
<div class="month rows">
<button>January</button>
<button>December</button>
<button>November</button>
</div>
</div>
<div class="quarter">
<button>Q3</button>
<div class="month rows">
<button>October</button>
<button>September</button>
<button>August</button>
</div>
</div>
<div class="quarter">
<button>Q2</button>
<div class="month rows">
<button>July</button>
<button>June</button>
<button>May</button>
</div>
</div>
<div class="quarter">
<button>Q1</button>
<div class="month rows">
<button>April</button>
<button>March</button>
<button>February</button>
</div>
</div>
</div>
</div>
<div class="year">
<button>2018</button>
<div class="rows">
<div class="quarter">
<button>Q4</button>
<div class="month rows">
<button>January</button>
<button>December</button>
<button>November</button>
</div>
</div>
<div class="quarter">
<button>Q3</button>
<div class="month rows">
<button>October</button>
<button>September</button>
<button>August</button>
</div>
</div>
<div class="quarter">
<button>Q2</button>
<div class="month rows">
<button>July</button>
<button>June</button>
<button>May</button>
</div>
</div>
<div class="quarter">
<button>Q1</button>
<div class="month rows">
<button>April</button>
<button>March</button>
<button>February</button>
</div>
</div>
</div>
</div>
<div class="year">
<button>2017</button>
<div class="rows">
<div class="quarter">
<button>Q4</button>
<div class="month rows">
<button>January</button>
<button>December</button>
<button>November</button>
</div>
</div>
<div class="quarter">
<button>Q3</button>
<div class="month rows">
<button>October</button>
<button>September</button>
<button>August</button>
</div>
</div>
<div class="quarter">
<button>Q2</button>
<div class="month rows">
<button>July</button>
<button>June</button>
<button>May</button>
</div>
</div>
<div class="quarter">
<button>Q1</button>
<div class="month rows">
<button>April</button>
<button>March</button>
<button>February</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Upvotes: 0
Views: 60
Answers (1)
Michael Benjamin
Reputation: 371163
Flex can do this by itself but not efficiently.
Grid can provide a clean, simple and light solution. Flex can help a little.
The code below meets your requirements for adaptability and maintenance.
.container {}
.year {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr;
height: 50vh; /* demo */
width: 50vw; /* demo */
border: 1px solid black;
}
button {
align-self: start;
justify-self: start;
}
.rows {
display: flex;
flex-direction: column;
}
.quarter {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
}
.month {}<div class="container rows">
<div class="year">
<button>2020</button>
<div class="rows">
<div class="quarter">
<button>Q4</button>
<div class="month rows">
<button>January</button>
<button>December</button>
<button>November</button>
</div>
</div>
<div class="quarter">
<button>Q3</button>
<div class="month rows">
<button>October</button>
<button>September</button>
<button>August</button>
</div>
</div>
<div class="quarter">
<button>Q2</button>
<div class="month rows">
<button>July</button>
<button>June</button>
<button>May</button>
</div>
</div>
<div class="quarter">
<button>Q1</button>
<div class="month rows">
<button>April</button>
<button>March</button>
<button>February</button>
</div>
</div>
</div>
</div>
</div>Upvotes: 1
Related Questions
- Layout a flex box similar to a table?
- CSS flexbox wrap effect on table row
- CSS Flexbox with tables as items
- how to display a 3-4-3 flexbox table?
- HTML Table as Flex item
- Simulating "rowspan" on <table> using Flexbox
- Using flexbox on a table row?
- flexbox with a table child
- Tabular layout with flexbox
- CSS table layout with n rows and expanding as columns