Tables can be useful for displaying simple data, but they do not tend to be mobile friendly. So, how does one set up a regular (legacy) table in HTML and from there convert it into a mobile-friendly responsive (RWD) table?

Step 1

Say I have this old table below:

john jacob jingle heimer schmidt john jacob jingle heimer schmidt
bruce boba anakin yoda rocky john jacob jingle heimer schmidt
rocket finn leia luke robin john jacob jingle heimer schmidt
wampa james tiberias kirk spock john jacob jingle heimer schmidt
daffy bugs elmer gumby bob john jacob jingle heimer schmidt


This table is nothing special - a legacy table. I don't have headings for it (but it would work if I did). Cascade, fortunately, puts tbody in place for me.

The table uses this code:

<table>
<tbody>
<tr>
<td>john</td>
<td>jacob</td>
<td>jingle</td>
<td>heimer</td>
<td>schmidt</td>
<td>john</td>
<td>jacob</td>
<td>jingle</td>
<td>heimer</td>
<td>schmidt</td>
</tr>
<tr>
<td>bruce</td>
<td>boba</td>
<td>anakin</td>
<td>yoda</td>
<td>rocky</td>
<td>john</td>
<td>jacob</td>
<td>jingle</td>
<td>heimer</td>
<td>schmidt</td>
</tr>
<tr>
<td>rocket</td>
<td>finn</td>
<td>leia</td>
<td>luke</td>
<td>robin</td>
<td>john</td>
<td>jacob</td>
<td>jingle</td>
<td>heimer</td>
<td>schmidt</td>
</tr>
<tr>
<td>wampa</td>
<td>james</td>
<td>tiberias</td>
<td>kirk</td>
<td>spock</td>
<td>john</td>
<td>jacob</td>
<td>jingle</td>
<td>heimer</td>
<td>schmidt</td>
</tr>
<tr>
<td>daffy</td>
<td>bugs</td>
<td>elmer</td>
<td>gumby</td>
<td>bob</td>
<td>john</td>
<td>jacob</td>
<td>jingle</td>
<td>heimer</td>
<td>schmidt</td>
</tr>
</tbody>
</table>


Step 2

Next, I wire this block:

/_shared-blocks/tables/plain-to-responsive-table

john jacob jingle heimer schmidt john jacob jingle heimer schmidt
bruce boba anakin yoda rocky john jacob jingle heimer schmidt
rocket finn leia luke robin john jacob jingle heimer schmidt
wampa james tiberias kirk spock john jacob jingle heimer schmidt
daffy bugs elmer gumby bob john jacob jingle heimer schmidt


No change yet? Proceed to the next step:

Step 3

The last step is to add class="RWDtable" to the table element:

john jacob jingle heimer schmidt john jacob jingle heimer schmidt
bruce boba anakin yoda rocky john jacob jingle heimer schmidt
rocket finn leia luke robin john jacob jingle heimer schmidt
wampa james tiberias kirk spock john jacob jingle heimer schmidt
daffy bugs elmer gumby bob john jacob jingle heimer schmidt


That's more like it! A responsive table!

So, what happens if I have a thead with a row with th elements in place?

Back to Top