Lake Anne W & O.D. Blur Dogs + Cars
Amusements Cross Country 2003 Test Create
Vimeo Gin Blossoms Kelly Bell Band uploader3
         <img src="TMM0047-Edit.jpg">
         <img src="LLL0007.jpg">

So I was testing the new blog software we have written at SiteWelder and I was looking at the really neat, responsive tables  our users create. That made me think it would be really neat if when the screen got narrow enough the table would collapse and each cell/ would collapse onto it's own line.

Here is what I came up with:

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

.encloser table, .encloser thead, .encloser tbody, .encloser th, .encloser td, .encloser tr { 
     display: block; 

.encloser td { 
     border: none;
     position: relative;
     margin: 0 auto;
     width: 100% !important;
.encloser td:first-of-type, .encloser td:last-of-type{
     padding: inherit 0;


.encloser is a class added to the parent element of the container for our blog content. So all of these rules are applied to table elements that are descended from .encloser as the selectors would indicate. I set the td elements to be display: block. On modern browsers, this will make sure that each td cell will expand be on its own line. For the most part all of our mobile browser are modern browsers that support HTML5 and CSS3 and we are only applying these rules on browsers that are 480 pixels wide or narrower. I suspect that not many IE 8 users are going to ever run their browsers any narrow than that.

Next we set the width of the td elements to be 100% !important. I generally try to refrain from using !important, but it is not uncommon for people to set their table column widths to be a percentage value, and since we are trying to fill the space available with content, we want to override the widths normally used to divide up the row width among td elements.

Finally, the last two rules are to override some padding setting we normally use for the first and last td elements within a row. Usually we eliminate the padding on the left for the first td and the padding on the right for the last td in a row. We set the padding on both sides to be 0 and the top and bottom to be whatever they would have been anyway.

Now go check this out on your mobile device or with the responsive view in your browser's developer tools!

UPDATE: 2016-03-08

I realized that on some of our older designs that leverage frames or iframes were failing on Firefox. Not a particularly huge deal because most people are not running Mozilla on mobile, but just in case, I added the imagesLoaded function and called on it to write some inline styles on the images. Not exactly perfect, but I wanted to put this job to bed:

$(function() {
$('.encloser img').imagesLoaded( function() {
   $('.encloser img').each(function(i) { 
var t = new Image();
       t.src = $(this).attr('src');
       $(this).attr('style',('max-width: '+ t.width + 'px; width: 100%'));


This is a the Text that is being linked

This is the Title


This is the Movie Min specialitet är nyhetsreportage om aktuella händelser, internationell politik, mänskliga rättigheter, utvecklingsfrågor, näringsliv, kultur, resor, mat- och restaurangliv/livsstil, samt personporträtt. Jag är TT:s New Yorkstringer på deltid och bevakar bland annat FN och amerikanskt samhällsliv för TT. Dessutom medverkar jag kontinuerligt i Svenska Dagbladet, Fokus, Gourmet, RES, Amnesty Press, Tidningen BARN och flera andra magasin och fackförbundstidningar med texter och fotografier. Jag har även jobbat redaktionellt: på Svenska Dagbladet (flera olika avdelningar), utrikesredaktionerna på Ekot respektive TT, samt Newsweek International i New York.

Jag har gjort reportageresor inom USA sedan 1997, och har gedigen erfarenhet av att bevaka olika delar av landet. För närvarande förbereder jag en bok med arbetsnamnet Harlems hjärta.



Jag har en Mastersexamen i internationella relationer från SIPA/Columbia University i New York (2002), med inriktning på mänskliga rättigheter och internationellt företagande. Från Stockholms universitet (1990-2000) har jag en fil kand-examen med journalistik som huvudämne, samt omfattande studier i statsvetenskap, språk, konstvetenskap, idéhistoria med mera. Dessutom har jag studerat statsvetenskap vid Università degli Studi di Padova, och arkitektur på KTH

2027 Lakebreeze Way
Reston VA 20191
© Mason Miller