5/10/2019 How to create responsive table in modern way - Yuki C.

- Medium

Acceder a medium.com con Google

Ruben Yepez

How to create responsive table in

ryepezmoreano@gmail.com

modern way
CONTINUAR COMO RUBEN

427
Yuki C. Follow
Sep 4, 2018 · 4 min read

Table is an important tool for representing data, however, for small screens
e.g. mobile and tablet, it is also crucial to represent data in different way.
Otherwise, it turns into chaos!

Oh, no! My ice-cream!

. . .

New friend: Flexbox

For modern browsers, we all can use flexbox to create responsive tables! If
you want to know more about flexbox, you can always view the superb
guide from CSSTricks!

First, this is what we want to do:

Desktop, tablet and mobile version of this table.

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:

1 <div class="table-container" role="table" aria-label="Destinations">

https://medium.com/@snowleo208/how-to-create-responsive-table-d1662cb62075 1/5
5/10/2019 How to create responsive table in modern way - Yuki C. - Medium
2 <div class="flex-table header" role="rowgroup">
3 <div class="flex-row first" role="columnheader">Country</div> Acceder a medium.com con Google
4 <div class="flex-row" role="columnheader">Events</div>
5 <div class="flex-row" role="columnheader">Time</div>
Ruben Yepez
6 <div class="flex-row" role="columnheader">Fees</div> ryepezmoreano@gmail.com
7 </div>
8 <div class="flex-table row" role="rowgroup">
CONTINUAR COMO RUBEN
9 <div class="flex-row first" role="cell"><span class="flag-icon flag-icon-gb"></span> United Ki
10 <div class="flex-row" role="cell">Stonehenge, Windsor and Bath with Pub Lunch </div>
427 11 <div class="flex-row" role="cell">19 Sep, 1p.m.</div>
12 <div class="flex-row" role="cell">US$500</div>
13 </div>
14 <div class="flex-table row" role="rowgroup">
15 <div class="flex-row first" role="cell"><span class="flag-icon flag-icon-ca"></span> Canada</d
16 <div class="flex-row" role="cell">Vancouver to Victoria and Butchart Gardens Tour </div>
17 <div class="flex-row" role="cell">23 Sep, 1:30p.m.</div>
18 <div class="flex-row" role="cell">US$387</div>
19 </div>
20 <div class="flex-table row" role="rowgroup">
21 <div class="flex-row rowspan first"><span class="flag-icon flag-icon-us"></span> United States
22 <div class="column">
23 <div class="flex-row">
24 <div class="flex-cell" role="cell">Napa and Sonoma Wine Country Tour</div>
25 <div class="flex-cell" role="cell">5 Sep, 9p.m.</div>
26 <div class="flex-cell" role="cell">US$600</div>
27 </div>
28 <div class="flex-row" role="rowgroup">
29 <div class="flex-cell" role="cell">Day Trip to Martha's Vineyard</div>
30 <div class="flex-cell">12 Sep, 5p.m.</div>
31 <div class="flex-cell">US$600</div>
32 </div>
33 <div class="flex-row">
34 <div class="flex-cell">Grand Canyon West Rim and Hoover Dam Tour</div>
35 <div class="flex-cell">5 Sep, 2p.m.</div>
36 <div class="flex-cell">US$550</div>
37 </div>
38 </div>
39 </div>
40 <div class="flex-table row">
41 <div class="flex-row first" role="cell"><span class="flag-icon flag-icon-au"></span> Australia
42 <div class="flex-row">Blue Mountains Tours</div>
43 <div class="flex-row">9 Sep, 2p.m.</div>
44 <div class="flex-row">US$400</div>
45 </div>
46 <div class="flex-table row">
47 <div class="flex-row first"><span class="flag-icon flag-icon-nz"></span> New Zealand</div>
48 <div class="flex-row">Milford Sound Coach & Cruise</div>
49 <div class="flex-row">12 Sep, 2p.m.</div>
50 <div class="flex-row">US$400</div>
51 </div>
52 </div>

flex-table.html hosted with ❤ by GitHub view raw

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;
}

https://medium.com/@snowleo208/how-to-create-responsive-table-d1662cb62075 2/5
5/10/2019 How to create responsive table in modern way - Yuki C. - Medium
So that all paddings, borders etc. will not count in 100%. If you have not use
Acceder a medium.com con Google
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. Ruben Yepez
ryepezmoreano@gmail.com

The 2nd important one is flexbox layout! CONTINUAR COMO RUBEN

427

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:

Responsive Flex Table

A PEN BY snowleo208

Run Pen

. . .

https://medium.com/@snowleo208/how-to-create-responsive-table-d1662cb62075 3/5
5/10/2019 How to create responsive table in modern way - Yuki C. - Medium

Newcomer: Grid layout Acceder a medium.com con Google

Not all the browsers can use this method, only 80% of browsers support it.
Ruben Yepez
But, why don’t we have a try? Let’s try to change the previous flexbox table ryepezmoreano@gmail.com
to CSS grid layout!
CONTINUAR COMO RUBEN

427 First, delete all flexbox-related properties and add:

.flex-table {
display: grid;
grid-template-columns: repeat(auto-fill, 25%);
}

After added repeat(auto-fill, 25%) , it will automatically generate rows of

25%.

The most tricky one is the nested table in tablet version, which the first cell
will changes to 100%. Do we need to create grid of 100% this time? No, we
will create 33.33%, that means 3 cells in 1 row.

.flex-table {
display: grid;
grid-template-columns: repeat(auto-fill, 33.33%);
grid-template-rows: repeat(auto-fill, 100%);
}

.first {
grid-column-start: 1;
grid-column-end: 4;
}

What does that means? That means when a div has .first class, which is
the first cell, it will occupied 1–3 grid.

That means, when we created 33.33% * 3 grid in 1 row, the first cell will
occupied 1 full row. Then the next row starts, all the remained items will go
to next row.

Here comes our final results!

Responsive Table (CSS Grid Version)

A PEN BY snowleo208

Run Pen

. . .

How about accessibility?

https://medium.com/@snowleo208/how-to-create-responsive-table-d1662cb62075 4/5
5/10/2019 How to create responsive table in modern way - Yuki C. - Medium
Well, using div to create table is neither native nor semantic. The best way
Acceder a medium.com con Google
to create table is still using the native <table> tag. You still can use the div
method, but don’t forget the aria-labels! Ruben Yepez
ryepezmoreano@gmail.com

If you want to achieve that using native method, here comes the responsive CONTINUAR COMO RUBEN
version:
427

Responsive Semantic Table

A PEN BY snowleo208

Run Pen

Just like back to 1990s! But you can see that, less HTML and CSS to get the
same result, and save more time for both accessibility (Explore more about
accessibility here) and development.

What would you choose to create your fancy responsive table these days?
Welcome to express your opinions!

CSS HTML Accessibility Flexbox Grid

Discover Medium Make Medium yours Become a member

Welcome to a place where words matter. On Follow all the topics you care about, and we’ll Get unlimited access to the best stories on Medium
Medium, smart voices and original ideas take center deliver the best stories for you to your homepage — and support writers while you’re at it. Just
stage - with no ads in sight. Watch and inbox. Explore $5/month. Upgrade

About Help Legal

https://medium.com/@snowleo208/how-to-create-responsive-table-d1662cb62075 5/5