Databases
StackOverflow2013
Postsdbo
POAligning table columns and rows alongside each other for printing
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAligning table columns and rows alongside each other for printing
    text
    copied!<p>I have a table grid layout that I have styled ready for printing, however I am having an issue trying to align a thumbnail image to the left, and then two rows along side next to the thumbnail.</p> <p>Not sure how best to align this correctly using tables, as I am used to using div's.</p> <p>I have the code below here: - <a href="http://jsfiddle.net/nCTFe/" rel="nofollow noreferrer">http://jsfiddle.net/nCTFe/</a> </p> <p>So basically [FIRST LINE and SECOND LINE] need to be like the first table but alongside the image on the left, at the moment mine keeps sitting underneath it!</p> <p>Any help would be great, the fiddle demonstrates this better!</p> <pre><code>&lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td width="30%" class="bottom_bdr stocklistItemImage"&gt; &lt;img height="75" width="100" class="stocklist_thumb" border="2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Funivia_Rote_Nase_alt.JPG/300px-Funivia_Rote_Nase_alt.JPG" alt=""&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="70%" class="vfeatures bdrBottom"&gt; &lt;span style="font-weight:bold"&gt;FIRST LINE:&lt;/span&gt; Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="70%" class="bottom_bdr a_top stocklistItemDescription"&gt; &lt;span style="font-weight:bold"&gt;SECOND LINE&lt;/span&gt; Seatis, Seatis, Seatis, Seatis, Seatis, Seatis, Seatis &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="" width="70%"&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre>
 

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