How do I make a table data only scrollable (Not entire table or row, just one cell)? This is the best I could do, but the display:block; makes all table cells of equal size. (with a different display or no display, a scrollbar appears but is not scrollable as the cell becomes bigger too)
<table border="1" width="100%" height="100%">
<tr>
<td rowspan="2" width="30%" height="10%">
</td>
<td width="60%" ><font color="#FFF" style="font-weight:bold">
<p>Coventry University - CV1 5FB</p>
</td>
</tr>
<tr>
<td height="90%" style="display:block; overflow-y: scroll; "><font color="#FFF">
<p>I WANT THIS CELL TO BE SCROLLABLE</p>
</td>
</tr>
</table>
<table border="1" width="100%" height="100%">
<tr>
<td rowspan="2" width="30%" height="10%">
</td>
<td width="60%" ><font color="#FFF" style="font-weight:bold">
<p>Coventry University - CV1 5FB</p>
</td>
</tr>
<tr>
<td height="90%"><font color="#FFF">
<p style="display:block; overflow-y: scroll; ">I WANT THIS CELL TO BE SCROLLABLE</p>
</td>
</tr>
</table>
I guess this is what you want;
I advise that don't give "td" overflow, but you can add overflow include "td";
Related
http://imgur.com/a/fKv2H
I need banner with height 100px. and img inside it with height 120px. So the picture comeee out my banner for 20px;
Its for emails.
Also i need text column right before picture, so that text in column with background f4f4f4
<table>
<tr>
<td>
<img src="" style="margin-top:-20px;" />
</td>
<td>
banner text here
</td>
</tr>
</table>
You can do this two ways, one involved slicing the image into two and the other is using two more tables. I have added the code below for you to decide which one you want to go with.
Option 1:
This option has the image as one piece sitting in an outer table with 3 columns. The outer two columns have a table with white background to cater for the heads/hats popping out of the grey area. I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
<td width="171" valign="top"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Option 2
For this option, you will need to slice the top part of the image (with white background) and place both the images in one table with two rows. Both images are centered and I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#ffffff"><img src="http://i64.tinypic.com/lz7f6.png" style="display: block;">
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#f4f4f4"><img src="http://i68.tinypic.com/4qo1mu.png" style="display: block;"></td>
</tr>
</tbody>
</table>
The final outcome for both codes should look like this:
Let me know which option best suits you.
** UPDATE **
Your question asked if you can have option 1 with image to the left and text on the right, here is the example:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="171" valign="top" style="padding-left:20px;"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
<tr>
<td style="font-family:Arial; font-size:12px; color:#000000; padding:5px 10px;">This is some text for your email</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I added colors so you could see that it was outside the table. I gave the image a height of 120px, width of auto. Made the td's have a max-height of 100px; And I left your -20px margin on the image.
<body style="background-color:pink">
<table style="background-color:orange;">
<tr>
<td style="max-height:100px; overflow-y:initial;">
<img src="https://i.imgur.com/ZESO4DT.png" style="margin-top:-20px; height:120px; width:auto;" />
</td>
<td style="max-height:100px;overflow-y:initial;">
banner text here
</td>
</tr>
</table>
</body>
This sounds very similar to previous questions, but I've not found something that matches what I'm trying to do here.
My current code (very verbose with everything in line) looks like this:
td { border: 1px solid black }
<table style="table-layout:fixed">
<tr>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
</tr>
<tr>
<td style="width:25%;text-align:center">Some text here</td>
<td style="width:25%;text-align:center">More text</td>
<td style="width:25%;text-align:center">Hi</td>
<td style="width:25%;text-align:center">Somewhat longer text</td>
</tr>
</table>
What I'm trying to accomplish should look like this:
That is, the four main columns should all be the same width, which is the width of the largest content of any of the columns.
The green columns should always be 30px, and the red and blue columns should fill the remaining space each side of that middle column, only up to the width available in the auto-sized outer column.
Setting the internal tables to 100% width makes this happen, but of course the outer table then takes up the entire page width.
I'm also aware that using tables for this is probably not a great idea now we can use CSS, but I'd like to get this example working in tables before 'translating' it.
I'm very opposed to using JavaScript to solve this, for the record!
Edit: I also tried putting all 'subcolumns' in one row, and setting the text to colspan three at a time, with the 25% then applied to that. This ended up confusing the engine, and the width ended up about 75% of the page.
<table style="table-layout:fixed" border="1">
<tr style="font-size: 1px;">
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
</tr>
<tr style="font-size: 6px;">
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
</tr>
<tr>
<td colspan="3" style="text-align:center">Some text here</td>
<td colspan="3" style="text-align:center">More text</td>
<td colspan="3" style="text-align:center">Hi</td>
<td colspan="3" style="text-align:center">Somewhat longer text</td>
</tr>
</table>
this might solve your answer, your previous code html elements are not properly closed look on that also.
I'm trying to put together a simple HTML email using old school coding standards and I've hit a brick wall that I didn't foresee. Internet Explorer, even IE 11, renders a simple table differently to every other browser I've tried (Chrome, Firefox, Safari) and I can't figure out why.
In terms of layout, it should look like this (note: colours are for illustration only -- apologies to your eyes!):
But in IE it looks like this:
The HTML is pretty simple:
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
<tr>
<td bgcolor="#ff0000" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
<td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">
Height: 42px
</td>
<td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" rowspan="2">
Height: 116px
</td>
<td bgcolor="#ff00ff" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
</tr>
<tr>
<td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" rowspan="2">
<div>
<div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">
Height: 208px
</div>
</div>
</td>
</tr>
<tr>
<td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
<div>
<div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">
Height: 134px
</div>
</div>
</td>
</tr>
</table>
JSFiddle: http://jsfiddle.net/mCLDh/
Am I doing something wrong, or is IE still messing with me after all these years?
(Note: For the commenters who are unaware, you cannot use floats or absolute positioning in HTML emails. That's why I'm using code that looks like it came from 1998. It's ugly, but it's more supported by email clients.)
What you are experiencing is the rowspan version of the Outlook issue pointed out here.
Nested tables are the logical choice, however, you can get your code working by adding empty cells on the left to enforce the row heights, making Outlook behave as expected.
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
<tr>
<td bgcolor="#ff0000" valign="top" height="42" width='0'><!-- Empty cell for outlook -->
</td>
<td bgcolor="#ff0000" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
<td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">
Height: 42px
</td>
<td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" rowspan="2">
Height: 116px
</td>
<td bgcolor="#ff00ff" valign="top" height="250" width='30' rowspan="3">
Height: 250px
</td>
</tr>
<tr>
<td bgcolor="#ff0000" valign="top" height="74" width='0'><!-- Empty cell for outlook -->
</td>
<td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" rowspan="2">
<div>
<div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">
Height: 208px
</div>
</div>
</td>
</tr>
<tr>
<td bgcolor="#ff0000" valign="top" height="134" width='0'><!-- Empty cell for outlook -->
</td>
<td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
<div>
<div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">
Height: 134px
</div>
</div>
</td>
</tr>
</table>
Your best bet is nested tables
http://jsfiddle.net/3L8qL/1/
like so
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
<tr>
<td bgcolor="#ff0000" valign="top" height="250" width='30'>Height: 250px</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">Height: 42px</td>
</tr>
<tr>
<td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" >
<div>
<div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">Height: 208px</div>
</div>
</td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" >Height: 116px</td>
</tr>
<tr>
<td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
<div>
<div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">Height: 134px</div>
</div>
</td>
</tr>
</table>
</td>
<td bgcolor="#ff00ff" valign="top" height="250" width='30'>Height: 250px</td>
</tr>
</table>
Edit:
Here's why the browser was confused.
You have created a table with 3 total rows. The sum height of all three rows is 250px.
In the second column, the first row is 42px, and the sum of the bottom two is 208px
In the third column, the first two rows is 116px, and the third row is 134px.
Which means that (table wide) the first row is defined at 42px, the third row is at 134px but the middle row is ambiguous at 166px, 92px, AND -18px at the same time.
Tables are meant to be tabular, but when you break the nature of the table, it's a crap shoot on what you'll get.
Ok, since you stated that it will be used for a html e-mail: do NOT use colspan, rowspan. split the table up in: (not it is NOT pretty but it will save you a metric shit-ton of problems)
<table>
<tr>
<td>
250px
</td>
<td>
<table>
<tr>
<td>
height 42px
</td>
</tr>
<tr>
<td>
height 208px
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
height 116px
</td>
</tr>
<tr>
<td>
height 134px
</td>
</tr>
</table>
</td>
<td>
250px
</td>
</tr>
</table>
(correct me if this can be done more easy, and yes, the inner tables can be replaced with divs.)
oh, and a shout out to ZURB for coming up with INK: http://zurb.com/ink/ (saved me heaps of trouble)
Interesting, must be minimum size thing, because if you make that value larger, it will render the same as others -- try 200 for example. But, IE doesn't make it smaller since it wants it to be the same height (or larger) than the next column.
I've been beating my head against a really stupid problem for the last while. Why can't I get the cell separating the two boxes to properly display at 9px?? I've done the math a couple of times and it works out, and yet in the cell w/ the arrow pointing towards it, it's adding extra height:
I actually appears to be doubling the 9 px height set for it (18px approx). Why?? This makes no sense.
<!-- BIG WRAPPER TABLE FOR CENTRAL CONTENT -->
<table width="700px" border="0" cellspacing="0" cellpadding="0" class="homepage">
<tr align="center">
<td>
<table width="681" height="451" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td rowspan="3" bgcolor="#FF66CC">Image will go here</td>
<td rowspan="3" width="9"> </td>
<td height="221" width="221" bgcolor="#3f7583">Text will go here</td>
</tr>
<tr height="9">
<td height="9" width="221" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td height="221" width="221" bgcolor="#CC0000">Image will go here</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END BIG WRAPPER TABLE -->
this is because of your td
<td height="9" width="221" bgcolor="#FFFFFF"> </td>
It is taking the height of your when rendered with normal font size, just remove it and it should work.
Here is the working fiddle
Instead of creating TD's for your spacing, why not just use the CellSpacing to accomplish what you need to do:
<table width="700px" border="0" cellspacing="0" cellpadding="0" class="homepage" style="font-size: 7pt;">
<tr align="center">
<td>
<table width="681" height="451" border="0" cellspacing="9" cellpadding="0" align="center">
<tr>
<td rowspan="2" bgcolor="#FF66CC">Image will go here</td>
<td height="221" width="221" bgcolor="#3f7583">Text will go here</td>
</tr>
<tr>
<td height="221" width="221" bgcolor="#CC0000">Image will go here</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END BIG WRAPPER TABLE -->
The text I have on top in the table row is somehow affected by the second column below it..cant seem to have it take up the entire width of the table.
http://jsfiddle.net/PmWBw/2/
Sorry I know I am the only one still working in tables. HTML emails still exist.
<table width="800" class="bodyContent" style="border: 1px solid #b8b7b7;margin-bottom: 20px;">
<table>
<tr style="width: 800px;">TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT</tr>
</table>
<td valign="top" width="260" class="leftColumnContent">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_left.png" mc:label="image" mc:edit="tiwc300_image00" />
</td>
</tr>
</table>
</td>
<td valign="top" width="260" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_right.png" mc:label="image" mc:edit="tiwc300_image01" />
</td>
</tr>
</table>
</td>
</table>
For starters, your first row consists of a td inside a tr that's inside ANOTHER td. If nothing else, that should probably be addressed.
Also, a bit unrelated to you original question, but it seems a bit redundant to have tables inside of your cells, when I'm not seeing any real benefit or function gained by the added code. You're styling your inner tables with the same things you can be applying to either the td or the image itself. At least in this particular application.
Just a thought.
UPDATED:
<table width="600" class="bodyContent" style="border: 1px solid #b8b7b7;margin-bottom: 20px;">
<tr>
<td colspan="2">
<table>
<tr style="width: 600px;">
<td>TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="260" class="leftColumnContent">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_left.png" mc:label="image" mc:edit="tiwc300_image00" />
</td>
</tr>
</table>
</td>
<td valign="top" width="260" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_right.png" mc:label="image" mc:edit="tiwc300_image01" />
</td>
</tr>
</table>
</td>
</tr>
</table>
First of all, you can not have the code looking like this:<td><tr><td>asdf</td></tr></td>. It the <tr> needs to be wrapped by <table>.