|  |
<table>
<tbody>
<tr>
<td>
<img src="TMM0047-Edit.jpg">
</td>
<td>
<img src="LLL0007.jpg">
</td>
</tr>
</tbody>
</table>
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).css({'visibility':'visible'});
});
});
});