Tag: responsive

Responsive Tables (with … or without Bootstrap)

An HTML/CSS only responsive table example
An HTML/CSS only table on a desktop.

I’ve never been a big fan of HTML tables. They take forever to code, they tend to have accessibility issues and they’re typically horrible on smaller screens.

However, sometimes you just can’t get around them.

If you’re using Bootstrap, there’s a out-of-the box fix, using .table-responsive. This utilizes an overflow and lets the table scroll left to right on smaller screens … but … I’ve never been a fan.

It’s not the most user friendly option and if you try to print the table, it almost always gets cut off (since you can’t scroll on a piece of paper).

There are javascript options as well … but … I’ve never been a fan of those either. I always prefer to keep things simple with HTML and CSS if possible.

So I’ve put together a basic option that uses a simple CSS solution, with:100% and display:block.

An HTML/CSS responsive table on a mobile device

You can set it up with a single media query or I’ve modeled my solution to match the Bootstrap breakpoints.

So for each breakpoint here’s the code for screens below 575px wide:


@media screen and (max-width: 575px) {
.table-xs-responsive th, .table-xs-responsive td {
width: 100% !important;
display: block !important;
box-sizing:border-box;
}
}

Note: I include border-box on the CMS I’m working with as it defaults to box-sizing: content-box

View the code on Codepen

See the Pen Responsive Table (with Bootstrap) by Jonathan Blundell (@jdblundell) on CodePen.

Of course the one downside to this solution is the table headers don’t follow the content as you scroll on your mobile device but for most of our tables that’s typically not an issue.

What do you think? Have you found a better solution for responsive tables?

Zooming with responsive design

Discovered something new tonight.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

is a lot different than:

<meta name="viewport" content="width=device-width, initial-scale=1">

When I started building out a responsive site for our organization, I ran into some snags with font sizes and such and kept running across “be sure to include” the top line of code when working with responsive design.

No one gave much explanation – just said it was needed.

You may have already figured this out – but it’s the last two attributes that make the biggest difference.

As I understand it now, initial-scale is the scale the site initial loads with.

Maximum-scale is the maximum size the user can scale the site to. So if you set a max of 1 – well there will be no pinch and zooming on your site.

Or if you set it to 2, 3 or 10, etc – that’s the max zoom a user can use.

So do us all a favor and leave that last bit (maximum-scale=1) off. Don’t limit your users. Let them navigate however they feel best.