Responsive horizontal scrolling tables for phones in CSS with no additional HTML

For some reason I always forget how to do this, and most tutorials out there suggest wrapping your table in a container <div> tag but as long as you’re using <tbody> (and, ideally, not using <thead> or <tfoot>) then it’s easy with a small bit of CSS and no HTML changes at all.

The trick is to display your <table> as a block, and your <tbody> as a table!

Here’s the code. Fit it into whichever breakpoint makes sense for your site. Mine shown here is the standard phone width breakpoint for WordPress (782 pixels):

@media screen and (max-width: 782px) {

  table {
    display: block;
    overflow-x: auto;
    width: 100%;
  }

  table tbody {
    display: table;
    width: auto;
  }

}

Of course, right after I posted this I found that I had already written about it two years ago with a slightly different solution. Never hurts to have a slightly different perspective.

Remove the info “bubble” from embedded Google Maps

What web designer/developer hasn’t had to embed a Google map at some point? If you’ve noticed, like I have, that recently it’s become impossible with Google’s generated embed code to keep the huge white “speech bubble” of location information from appearing (and always being cut off at the top) on your map, here’s an easy (if slightly tedious) solution, courtesy of Harry Bailey:

To remove the pin, you can now add &amp;iwloc=near to the end of the iframe src attribute.

In the process of working out this issue I resolved another on my own. If you want to change the default zoom of the map, look for the &amp;spn query string variable in the Google Maps URL. In my particular instance, it was zoomed in way too tight, with a value something like this: &amp;spn=0.0006125,0.0006125. The exact value you’ll want to use will probably vary, so experiment, but I was able to get good results with: &amp;spn=0.04,0.04

(And as a final aside‚Ķ I hate how query strings now have to have &amp; as the delimiter instead of just &, for reasons I don’t even totally understand — something to do with XML, I guess — but that I feel underscore the fundamental flaw of ampersand codes in general. A much less commonly-used character should have been chosen if we needed one for embedding extended characters. And now with the proliferation of UTF-8, we shouldn’t really need ampersand entities at all!)