Databases
StackOverflow2013
Postsdbo
POResponsive table: 2 column table with l+r images...shrink it?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive table: 2 column table with l+r images...shrink it?
    text
    copied!<p>I have a two column structure. The left holds the left side of one image, and the right holds the right side of the same image. I do this so that a user can click on the left to be directed one place, and the right to be directed another place.</p> <p>Here's what it looks like:</p> <p>CSS</p> <pre><code>&lt;style type="text/css"&gt; body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif} table {border-collapse: collapse;} table.fixed { table-layout:fixed; } table.fixed td { overflow: hidden; } @media only screen and (max-width: 640px) { body[yahoo] .deviceWidth {width:440px!important; padding:0;} body[yahoo] .center {text-align: center!important;} } @media only screen and (max-width: 479px) { body[yahoo] .deviceWidth {width:280px!important; padding:0;} body[yahoo] .center {text-align: center!important;} } &lt;/style&gt; </code></pre> <p>HTML</p> <pre><code>&lt;table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff"&gt; &lt;tr&gt; &lt;td class="center" style="padding:0px 0 0 0px"&gt; &lt;table width="50%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth"&gt; &lt;tr&gt; &lt;td style="padding: 0px 0px 12px 0px" align="center"&gt; &lt;p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"&gt;&lt;a href="blah"&gt;&lt;img width="290" src="blah" alt="" border="0" style="width: 290px" class="deviceWidth" /&gt;&lt;/a&gt;&lt;/td&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table width="50%" border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth"&gt; &lt;tr&gt; &lt;td style="padding: 0px 0px 12px 0px" align="center"&gt; &lt;p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"&gt;&lt;a href="blah2"&gt;&lt;img width="290" src="blah2" alt="" border="0" style="width: 290px" class="deviceWidth" /&gt;&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>The issue is...I want to make it responsive. But instead of stacking one table on top of the other, I want them to shrink side-by-side so that the image is preserved. How can I achieve this?</p> <p>EDIT:</p> <p>Here's a fiddle:</p> <p><a href="http://jsfiddle.net/54c5W/" rel="nofollow noreferrer">http://jsfiddle.net/54c5W/</a></p> <p>I'd like the images to remain side-by-side when I shrink the screen, not stack on top of each other.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload