Docs

[MoCoRealEstate]

Hi – thanks for your guidance helping me figure out how do do this.

I need to create a table that will have images with a precise dimensions. You can see what I’m trying to do on my current site at this link. The same html/css on my new site has spaces between the two rows that I can’t find a way to remove – click here.

To create this on my X site, I have “Raw HTML” added to a “Content Band”. I would like to keep all html and CSS as one block of code if at all possible. That’s probably not coding best-practice, but I have a “spreadsheet code generator” that allows me to create complicated tables without hand-coding.

Thanks to your help I’ve been able to remove all spaces between columns. Now I’m unable to find a way to remove the white space between these rows. I’ve pasted the code below. I added max-height: 350px to the ‘table style’, but that doesn’t have an effect. Let me know if you have any ideas. THANKS!

Here’s the code I’m using in this example:

<table style="table-layout: fixed; max-width: 450px; max-height: 350px;border-collapse: collapse; border-spacing: 0;">
<tbody>
<tr>
<td style="width: 450px; padding: 0px 0px; border-width: 0px;">
<table style="table-layout: fixed; max-width: 450px; border-collapse: collapse; border-spacing: 0;">
<tbody>
<tr>
<td style="width: 200px; padding: 0px 0px; border-width: 0px;"><img src="http://mocorealestate.com/wp-content/blogs.dir/412/files/2014/11/C200W-300RO.jpg" alt="C200W-300RO" width="200" height="300" /></td>
<td style="width: 150px; padding: 0px 0px; border-width: 0px;"><img src="http://mocorealestate.com/wp-content/blogs.dir/412/files/2014/11/C150W-300.jpg" alt="C150W-300" width="150" height="300" /></td>
<td style="width: 100px; padding: 0px 0px; border-width: 0px;"><img src="http://mocorealestate.com/wp-content/blogs.dir/412/files/2014/11/C100W-300RO.jpg" alt="" width="100" height="300" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 450px; padding: 0px 0px; border-width: 0px;">
<table style="table-layout: fixed; max-width: 450px; border-collapse: collapse; border-spacing: 0;">
<tbody>
<tr>
<td style="width: 250px; padding: 0px 0px; border-width: 0px;"><img src="http://mocorealestate.com/wp-content/blogs.dir/412/files/2014/11/C250W-50.jpg" alt="C250W-50" width="250" height="50" /></td>
<td style="width: 200px; padding: 0px 0px; border-width: 0px;"><img src="http://mocorealestate.com/wp-content/blogs.dir/412/files/2014/11/C200W-50RO.jpg" alt="C200W-50RO" width="200" height="50" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

[Nabeel A]

Hi there,

Thanks for writing in!

You can try this code instead:

<table style="table-layout: fixed; max-width: 450px; max-height: 350px;border-collapse: collapse; border-spacing: 0;">
<tbody>
<tr>
<td style="width: 450px; padding: 0px 0px; border-width: 0px;">
<table style="table-layout: fixed; max-width: 450px; border-collapse: collapse; border-spacing: 0;">
<tbody>
<tr>
<td style="width: 200px; padding: 0px 0px; border-width: 0px;"><img src="http://mocorealestate.com/wp-content/blogs.dir/412/files/2014/11/C200W-300RO.jpg" alt="C200W-300RO" width="200" height="300" /></td>
<td style="width: 150px; padding: 0px 0px; border-width: 0px;"><img src="http://mocorealestate.com/wp-content/blogs.dir/412/files/2014/11/C150W-300.jpg" alt="C150W-300" width="150" height="300" /></td>
<td style="width: 100px; padding: 0px 0px; border-width: 0px;"><img src="http://mocorealestate.com/wp-content/blogs.dir/412/files/2014/11/C100W-300RO.jpg" alt="" width="100" height="300" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 450px; padding: 0px 0px; border-width: 0px;">
<table style="margin-top: -42px !important; table-layout: fixed; max-width: 450px; border-collapse: collapse; border-spacing: 0;">
<tbody>
<tr>
<td style="width: 250px; padding: 0px 0px; border-width: 0px;"><img src="http://mocorealestate.com/wp-content/blogs.dir/412/files/2014/11/C250W-50.jpg" alt="C250W-50" width="250" height="50" /></td>
<td style="width: 200px; padding: 0px 0px; border-width: 0px;"><img src="http://mocorealestate.com/wp-content/blogs.dir/412/files/2014/11/C200W-50RO.jpg" alt="C200W-50RO" width="200" height="50" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Let us know how this goes!

[MoCoRealEstate]

Thar she blows!! That’s exactly what I needed — THANKS!!!!

[Rad]

You’re so welcome Moco! 🙂

[Author]

Posts