HTML <table> With CSS flexbox

Why use flexbox to simulate a table?

It can reverse the <table> without JavaScript. This is quite usable under some particular scenarios.

Alternative method

Another method to reverse table rows doesn’t need flexbox — rotate <tbody> and <tr> 180 degree:

1
2
3
4
5
table.reverse {
tbody, tbody > tr {
transform: rotate(180deg);
}
}

This works under latest Chrome/Firefox for macOS/Linux pretty well. However, this will rediculously corrupt the rendering of Electron. (tested under Electron v1.7.8 for Windows). I don’t know why.

I use the terms of HTML’s native table, so it’s more comprehensible for experienced HTML developer.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
.flex-table
.thead
.tr
.th.time Time
.th.ip IP
.th.type Type
.th.msg Description
.tbody.reverse
.tr.log(v-for="e in events")
.td.time {{ e.created_at }}
.td.ip {{ e.ipaddr }}
.td.type {{ e.type] }}
.td.msg {{ e.msg }}

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.flex-table {
&.reverse, .reverse { // reverse!!!
display: flex;
flex-direction: column-reverse;
}
.tr {
display: flex;
flex-direction: row;
flex-grow: 0;
flex-wrap: wrap;
width: 100%;
padding-left: 15px;
padding-right: 15px;
.th {
font-weight: bold;
}
.td, .th {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 20px;
&.time {
flex-grow: 4;
width: 100px;
}
&.ip {
flex-grow: 2;
width: 100px;
}
&.type {
flex-grow: 2;
width: 100px;
}
&.msg {
flex-grow: 8;
width: 100px;
}
}
}
}