Don’t care about the tours right now, it just copy and paste from the web (although I also hope to go there lol)!

First, we can create the structure of the table. The most tricky one is the nested table in “United States”, we will use nested div to cover that:

For simplicity purpose, we use Flag Icon CSS to create flags here. For production, it should use SVG or SVG sprites to do so, as we only need few flags (to save more bandwidth!).

For nested table of “United States”, you can see we used different class column to create it.

Then, our lovely CSS!

For normal rows, we use .flex-table and .flex-row to wrap them, and the rows are equally 25%, which means 100% / 4.

For nested rows, the first cell is 25%, then we use .column as the container, width 75% and wrap tables with .rowspan and .flex-table .

The most important one is box-sizing:

div {

box-sizing: border-box;

}

So that all paddings, borders etc. will not count in 100%. If you have not use this code and you added 0.5em padding, you will need to calculate the width yourself, e.g. calc((100% — 0.5em) /4) in your CSS.

The 2nd important one is flexbox layout!

display: flex;

flex-flow: row wrap;

As you can see, we use flexbox for this layout, and all cells are in a row, so we need to add this code to .flex-table .

Flex-flow is the shorthand for flex, the first row is flex-direction, which means all cells become rows automatically.

The second one is flex-wrap, so if all elements exceed width of container, it will automatically wrapped to second line.

Last but not least, the border settings are important too!

Since div’s border will overlap, so all the borders should be unique. This time, I have set the bottom and right border in .flex-row and left border in .flex-table . So the bottom border will create top border for the next row :)

$table-header: #1976D2;

$table-header-border: #1565C0;

$table-border: #d9d9d9; .flex-table {

display: flex;

flex-flow: row wrap;

border-left: solid 1px $table-border;

transition: 0.5s;

&:first-of-type {

border-top: solid 1px $table-header-border;

border-left: solid 1px $table-header-border;

}

&:first-of-type .flex-row {

background: $table-header;

color: white;

border-color: $table-header-border;

}

}

Here comes our final product: