Vertically aligning an image in a td isn't working - css

I have four table cells, two of which have one image each (the other two cells aren't related to my problem, AFAIK). I am trying to vertically align the smaller image at the top of its table cell. I have tried using vertical-align:top for the image within the table cell, and it isn't working. I am unsure as to why, as I cannot see anything that would cause the issue (using Firebug).
<table class="store-table">
<tr>
<td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&PP=1" target="_blank">Everybody Needs Love</a></td>
<td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td>
</tr>
<tr class="pics">
<td style="width: 25%;"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></td>
<td style="width: 25%;">$15.00</td>
<td style="width: 25%;"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/In-Concert-Cover-178x300.jpg" width="178" height="300" /></td>
<td style="width: 25%;">$20.00</td>
</tr>
</table>
The demo site in question is here. http://www.josephruscitti.com/clients/jimmyclanton/store/ There are three rows of content all together on the table in this page, the row I'm having trouble in is the second row.

You need to apply the vertical align to the td like so:
<table class="store-table">
<tr>
<td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&PP=1" target="_blank">Everybody Needs Love</a></td>
<td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td>
</tr>
<tr class="pics">
<td style="width: 25%; vertical-align:top;"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></td>
<td style="width: 25%;">$15.00</td>
<td style="width: 25%;"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/In-Concert-Cover-178x300.jpg" width="178" height="300" /></td>
<td style="width: 25%;">$20.00</td>
</tr>
</table>
By the way, applying css inline to every table cell is not a great method. You'd be better using separate CSS for some of this. For example:
.store-table td { width: 25%; }

Related

CSS table column autowidth in HTML Outlook e-mail

I'm trying to make a centralize button in HTML e-mail. The tricky part here is my wish the button to be as wide as its content. The following code works perfect except in Outlook.
Here is the HTML:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="width:1%;white-space:nowrap">
<a href="#" style="text-decoration:none">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="margin-top:16px;padding:8px 16px 8px 16px;background-color:#5091cd;border-radius:2px">
<a href="#" style="font-size:15px;letter-spacing:.04em;color:#ffffff;text-transform:uppercase;text-decoration:none;display:block;text-align:center;max-width:600px;overflow:hidden;text-overflow:ellipsis">
Go to platform
</a>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
The expected result is:
The actual visualization:
Increasing the width of the td tag will help you adjust the content in one line.
<style="width:20%;white-space:nowrap">
if you want to take the full width of the container, make td width auto.
currently, td tag width is deciding how the content text will wrap.

Adjust HTML E-mail To Render The Same in Different Clients

I am putting together a html based e-mail for distribution to our subscribers. However, when I render it in various clients, it is coming out slightly differently. The major difference that I see is that in some clients the main picture is offset to the left, and the grid boxes may have a different height depending on the number of lines contained. My aim was to reserve enough space for multiple lines so that all boxes would be the same height. Can anyone help me to locate the problem areas? The client in the picture with the problems is Outlook 2003, and the correct one is gmail in Chrome.
Because the html is too long to fit in stackoverflow, I'm including extracts that produce the main item with the offset picture, and the various sized grid box.
Strange offset:
<tr>
<td height="15" style="text-align:center" width="100%"></td></tr><tr>
<td border="0" width="600" style="text-align:center" align="center">
<img alt="" border="0" width="600" height="400" align="top" src="https://ci5.googleusercontent.com/proxy/vTfZfEiq_KN8RAd8D80hICfjyqCddT8oyJJNwnuvZ8D7jg4mbFEbJab51vi_ZiMrHNRitMhAtMu_hSU9Eiy1iNjIEz8YmmlkCx6M6C1lQmBkC6jm7ye1uSoKDMmq8XVo-qD0ZXA=s0-d-e1-ft#https://img.grouponcdn.com/deal/3YewhZBYt2iywAzJsuHy/ZP-960x582/v1/t440x300.jpg" style="width:600px;min-height:400px">
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td>
<table width="100%" border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="23" style="min-height:23px" src="https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png" alt="Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort">
</td>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:right">
<span>$1179</span>
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Branchville, NJ, USA
</td>
</tr>
</tbody>
</table>
</td>
</tr></tbody>
</table>
</td>
</tr>
Various sized boxes:
<tr>
<td align="center" valign="top">
<table align="center" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci4.googleusercontent.com/proxy/2iCMcbaq9UymG0sHx0JXF9wuBHu-8ibBC66U7s1q7i7Lo5zNS83olrIm7NNBuhybni869s64dxK1_5u13bYUudnGh3fh680G2yLGIc9rQ_YFWe2YLdExA4UUO5A2j_7rJlhLmXQ=s0-d-e1-ft#https://img.grouponcdn.com/deal/rHsqnohK7vGd79o7hGUq/VQ-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$285</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Luxury Villas & Gourmet Meals in Puerto
Vallarta</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Puerto Vallarta, Mexico</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci6.googleusercontent.com/proxy/rhQa6yfks-smgpfVft9mFyFjy-buDbxqyC7skH8tBNv-KfX5FspdLl6GpcdipcquRGoQreMi29C5cmhGaXFp8c6kF4P84Duam0ZfHGGqQZUudPbo5dXvcAOmj2qFfCfTB3KnZEg=s0-d-e1-ft#https://img.grouponcdn.com/deal/deYNpeAfGJxahmvmev46/SV-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$99</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Charming Northern Michigan Inn near Lakes</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Denton Township, MI, USA</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
This is a picture of how it should look (gmail):
This is a picture of how it looks in outlook 2003:
Your question is a neverending story.... few suggestions.
reset as much default value, as possible
use tables, but reset cellpadding cellspacing and border values to 0
do not use colspan, rowspan, because a few clients do not support it, and rest of the clients may handle it differently
you need to double/triple declare the css values (always write css inline, and in head style)
no margins, only padding values, and only on TD elements
always give exact width and height for images, (and apply display:block to remove unwanted spaces below)
set font-size 0 on body, and after set font-size on every element where you need, to avoid invisible characters on inline elements.
Height values on TD sometimes works, sometimes not, thats why a lot of ppl use spacer images. I recommend an empty TD with padding-top:30px is much stable....
I'm a frontend developer #EDMdesigner.com

HTML Email - Aligning content vertically

I'm new to this forum and I apologise in the advance in case this question has already been solved somewhere else, I couldn't really find anything helpful.
I'm coding a simple HTML template to be used on a dynamic platform where my clients can add the content by themselves.
The template has 3 stories on the bottom part which must stay vertically alined no matter how long is the content of each story.
Ideally I would need the longer story to determinate the height of the entire block.
No problem so far.
The problems comes because due to the dynamic platform I need to keep the content of a single story within a specific dynamic tag and at the same time I need to find a way where the longest story determinate the height of the other two stories.
EDIT Just to clarify: I need the "Read More" cell to be always alined to the bottom, the top picture always alined to the top while the title and the description cells height might vary.
here is the structure of my code. I would be very grateful to any suggestions.
<table width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<DYNAMIC TAG>
<table width="195" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/image.jpg"/></td>
</tr>
<tr>
<td>Title </td>
</tr>
<tr>
<td>Text</td>
</tr>
<tr>
<td>Read More</td>
</tr>
</table>
</DYNAMIC TAG>
</td>
<td width="22"> </td>
<td width="195" valign="top">
<DYNAMIC TAG>
<table width="195" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/image.jpg"/></td>
</tr>
<tr>
<td>Title </td>
</tr>
<tr>
<td>Text</td>
</tr>
<tr>
<td>Read More</td>
</tr>
</table>
</DYNAMIC TAG>
</td>
<td width="23"> </td>
<td width="195" valign="top">
<DYNAMIC TAG>
<table width="195" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/image.jpg"/></td>
</tr>
<tr>
<td>Title </td>
</tr>
<tr>
<td>Text</td>
</tr>
<tr>
<td>Read More</td>
</tr>
</table>
</DYNAMIC TAG>
</td>
</tr>
</table>
I hope I was clear and everything make sense, and I tank you already for your help.
Have a lovely day,
Eleonora.
Ultimately the stories can only be as long as the content itself, but a table row will keep all cells in that row the same height:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#858585" valign="top">Section 1
</td>
<td width="200" bgcolor="#656565" valign="top">Section 2
</td>
<td width="200" bgcolor="#454545" valign="top">Section 3<br>
This sets the height of all 3.<br>...<br>...<br>...<br>...
</td>
</tr>
</table>
You are currently nesting a table inside each of these table cells - the table is independent so they will expand as needed, causing 3 tables with different heights. This would be invisible unless you were adding a background color or border to the table. In that case, instead of applying it to the nested table, apply it to the parent table cells.
If you want all content to 'float' at the bottom of the equal height table cells, change the valign attribute for each cell to valign="bottom"
UPDATE:
Thanks for the clarification - The issue is that you want to valign to the top and bottom within the same cell, which can't be done. Forcing 100% height isn't really supported either, so nesting a 100% height table with 2 rows (content then read me) won't work.
There are 2 ways I can think of (besides setting a fixed heights). One is pretty straight forward, and one is more out-the-box thinking.
Method 1:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#858585" valign="top">Section 1<br>...<br>...<br>...
</td>
<td width="200" bgcolor="#656565" valign="top">Section 2<br>...<br>...
</td>
<td width="200" bgcolor="#454545" valign="top">Section 3<br>
This sets the height of all 3.<br>...<br>...<br>...<br>...<br>
</td>
</tr>
<tr>
<td width="200" bgcolor="#858585" valign="top">Read More
</td>
<td width="200" bgcolor="#656565" valign="top">Read More
</td>
<td width="200" bgcolor="#454545" valign="top">Read More
</td>
</tr>
</table>
Drawback with this method is that your read me links are not immediately following the story in the code.
Method 2:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#858585" valign="top">Section 1<br>...<br>...<br>...
</td>
<td width="400" valign="top" rowspan="2">
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#656565" valign="top">Section 2<br>...<br>...
</td>
<td width="200" valign="top" rowspan="2">
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#454545" valign="top">Section 3<br>
This sets the height of all 3.<br>...<br>...<br>...<br>...<br>
</td>
</tr>
<tr>
<td width="200" bgcolor="#454545" valign="bottom">Read More
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="200" bgcolor="#656565" valign="bottom">Read More
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="200" bgcolor="#858585" valign="bottom">Read More
</td>
</tr>
</table>
The tables are nested so that they are driven by the 'grandchild' or a pre-determined biggest. Drawback is that this only works if you know which section is going to be the largest. The way this particular example is set up, the third table needs to have more content than the first two, but you could alternatively build it with either other section being the 'always biggest'.
I'm sure neither option is ideal, but unfortunately that is the best you can do with the limitations of cross-client supported html-email.

Placing image on bottom right corner of table cell does not work in Firefox and Safari

I have the following table structure in my aspx page. I need to place the image at bottom right corner of a table cell. The code below works fine for IE and Chrome. But in Firefox and Safari, the image is displayed at the bottom right corner of the row, and not the cell.
<table style="width:100%">
<tr>
<td valign="top" style="width:20%; position:relative">
<div>
//some controls here
</div>
<img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/>
</td>
<td valign="top" style="width:80%">
<div>
//control here
</div>
</td>
</tr>
<tr>
<td align="center" colspan="1" style="width: 20%">
//control here
</td>
<td align="center" colspan="2" style="width: 80%">
</td>
</tr>
<tr>
<td align="center" style="width:100%" colspan="2">
//control here
</td>
</tr>
</table>
Please help with this!!
Thanks.
I solved this problem by adding another row for the image and setting its alignment.
<tr>
<td style="width: 20%;" align="right" valign="bottom">
<asp:Image ID="Img1" runat="server" />
</td>
</tr>
I think you need to remove the position:relative of the parent td for this image as the absolute of the images is done relative to the td that has the position:relative
<table style="width:100%">
<tr>
<td valign="top" style="width:20%;">
<div>
//some controls here
</div>
<img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/>
</td>
<td valign="top" style="width:80%">
<div>
//control here
</div>
</td>
</tr>
<tr>
<td align="center" colspan="1" style="width: 20%">
//control here
</td>
<td align="center" colspan="2" style="width: 80%">
</td>
</tr>
<tr>
<td align="center" style="width:100%" colspan="2">
//control here
</td>
</tr>
</table>

Table problems with WebKit

I'm having trouble getting this code to show up correctly in WebKit browsers(chrome/safari). It looks fine in IE6, IE7, and FireFox.
<table width="100%">
<tr>
<td rowspan="2" style="vertical-align:middle;">
<img src="/i/thumbnails/acotgc25sm.gif" alt="Gift Certificate"/>
</td>
<td style="vertical-align:middle;">
Wishlist
</td>
<td style="vertical-align:middle;">
Link to Us
</td>
<td style="vertical-align:middle;">
Affiliate Program
</td>
<td style="vertical-align:middle;">
Privacy
</td>
<td style="vertical-align:middle;">
Guarantee
</td>
<td rowspan="2" style="width:160px;">
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
</td>
</tr>
<tr>
<td style="vertical-align:middle;">
About Us
</td>
<td style="vertical-align:middle;">
Shipping
</td>
<td style="vertical-align:middle;">
Why Buy From Us
</td>
<td style="vertical-align:middle;">
Contact Us
</td>
<td style="vertical-align:middle;">
Help
</td>
</tr>
</table>
The problem is that WebKit makes the top row very small and the bottom row fill in the rest of the space instead of each row having an equal height.
Anyone have any ideas of how to make it show up how I want it to in WebKit based browsers?
I have a few recommendations for you but I can't answer your question completely because WebKit seems to render your source fine when I try it.
First, maybe you can change width="100%" to style="width:100%;" Perhaps combined with the other markup, it's putting the browser in quirks mode.
Second, make sure you have the correct doctype on and your code validates or AT LEAST comes close. The doctype I used when copying & pasting your code was XHTML Strict.
Otherwise, please post the source code of the whole page or just link to a live demo. Even a screenshot would help.
I could help more with a live example to test on but you could try adding this to your tr tags.
<tr style="height: 50%;">
Assuming you only need two rows this will bring them to equal height.
a proper example to ensure it is not showing correctly in webkit is the following:
<table width="200" border="1">
<tbody>
<tr>
<td rowspan="2" width="15">
this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
</td>
<td>
this should be big instead
</td>
</tr>
<tr height="20">
<td height="20">
this row fails to size to 20 height on webkit
</td>
</tr>
</tbody>
</table>
as you can see the left part is rendered fine, but the right part should be different, as in the top row should populate the left over space and the bottom row is set to 20 height (as you can see neither the tr height nor the td height is taken into consideration by webkit). this renders fine in all other browsers
EDIT:
after playing around and tinkering about my problem, I came to the below solution.
completely relying on jquery reading the height attribute property from the row you want to change:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pipnorowspan").height(function(){
return $("#rcarowspan").height() - $("#piplowerrow").attr('height') + 2;
});
});
</script>
</head>
<body>
<table width="200" style="border-collapse:collapse; border:1px solid #000;" id="ertable">
<tbody>
<tr style="border:1px solid #000;">
<td rowspan="3" width="15" id="rcarowspan" style="border:1px solid #000;">
this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
</td>
<td id="pipnorowspan" style="border:1px solid #000;">
this should be big instead
</td>
</tr>
<tr height="20" id="piplowerrow" style="border:1px solid #000;">
<td height="20" style="border:1px solid #000;">
this row fails to size to 20 height on webkit
</td>
</tr>
</tbody>
</table>
</body>
</html>

Resources