Tables are a powerful way to display structured data. However, viewing complex tables on mobile devices can be challenging. Amazium’s dynamic table styling ensures tables remain readable and responsive by adapting their layout for smaller screens.
Each <td> element should include a data-title attribute that matches the respective column title. Wrapping content inside <span class="cell-content">...</span> ensures optimal styling on mobile devices.
<td>.| Actor: | Film: | Quote: |
|---|---|---|
| Robert Downey Jr | Ironman 3 | A famous man once said, 'We create our own demons.' Who said that? What does that even mean? Doesn't matter. I said it 'cause he said it. So now, he was famous and that basically getting said by two well-known guys. I don't, uh... I'm gonna start again. |
| Marlon Brando | On the Waterfront | You don't understand! I coulda had class. I coulda been a contender. I could've been somebody, instead of a bum, which is what I am. |
| Matt Damon | The Martian | If ruining the only religious icon I have leaves me vulnerable to Martian vampires, I'll have to risk it. |
| Harrison Ford | Blade Runner | You're in a desert walking along in the sand when all of the sudden you look down, and you see a tortoise, it's crawling toward you. You reach down, you flip the tortoise over on it's back. The tortoise lays on it's back, it's belly baking in the hot sun, beating it's legs trying to turn it'self over, but it can't, not without your help. But you're not helping. Why is that? |
When viewed on a smaller screen, each row adapts to display content in a stacked format, preserving readability.
<table class="table--mobile">
<tbody>
<tr>
<th>Actor:</th>
<th>Quote:</th>
<th>Film:</th>
</tr>
<tr>
<td data-title="Actor"><span class="cell-content">...</span></td>
<td data-title="Quote"><span class="cell-content">...</span></td>
<td data-title="Film"><span class="cell-content">...</span></td>
</tr>
</tbody>
</table>