{"id":14164,"date":"2018-03-20T00:40:35","date_gmt":"2018-03-20T06:40:35","guid":{"rendered":"http:\/\/casadeblundell.com\/jonathan\/?p=14164"},"modified":"2018-03-20T00:40:35","modified_gmt":"2018-03-20T06:40:35","slug":"responsive-tables-with-or-without-bootstrap","status":"publish","type":"post","link":"http:\/\/casadeblundell.com\/jonathan\/responsive-tables-with-or-without-bootstrap\/","title":{"rendered":"Responsive Tables (with … or without Bootstrap)"},"content":{"rendered":"
\"An<\/a>
An HTML\/CSS only table on a desktop.<\/figcaption><\/figure>\n

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.<\/p>\n

However, sometimes you just can’t get around them.<\/p>\n

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

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).<\/p>\n

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.<\/p>\n

So I’ve put together a basic option that uses a simple CSS solution, with:100%<\/code> and display:block<\/code>.<\/p>\n

\"\"<\/a>
An HTML\/CSS responsive table on a mobile device<\/figcaption><\/figure>\n

You can set it up with a single media query or I’ve modeled my solution to match the Bootstrap breakpoints.<\/p>\n

So for each breakpoint here’s the code for screens below 575px wide:<\/p>\n


\n@media screen and (max-width: 575px) {
\n.table-xs-responsive th, .table-xs-responsive td {
\nwidth: 100% !important;
\ndisplay: block !important;
\nbox-sizing:border-box;
\n}
\n}
\n<\/code><\/p>\n

Note: I include border-box on the CMS I’m working with as it defaults to box-sizing: content-box<\/p>\n

View the code on Codepen<\/a><\/p>\n

See the Pen Responsive Table (with Bootstrap)<\/a> by Jonathan Blundell (@jdblundell<\/a>) on CodePen<\/a>.<\/p>\n