Coding inline and with tables, I made a simple HTML e-mail signature that contains two images. When I send it from MacOS Mail several different clients, it works well on desktop. On iOS Mail, it shrinks down the size of the table, which is expected behavior, but it makes it significantly smaller than it needs to be, thus making my font-sizes tiny.
The table has a 3 row, 2 column structure, two colored rows and one white one which has a colspan for full table width.
Things I have tested to no effect:
more or less text content
giving the cells a width in pixels
giving the whole table width:100%
marking images display:block or display:inline
Apparently iOS Mail thinks the table is wider than it is, or at least treats it that way.
When I remove the images the two columns become equally wide and the table fills the whole width. So I'm looking for a solution in how the images are styled; does anyone know if I can add some CSS or HTML attribute to the images to fix this?
Here's the code, stripped of some text styling to keep it legible:
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign=top style="background:#f9f2c8;padding:21px 20px 0 20px;vertical-align:top;">
<div style="font-size:13px; ">
<div style="font-size:16px;font-weight:600;">Name of the sender </div>
<div>Description of the role of the sender</div>
</div>
</td>
<td valign=top style="background:#96e7cf;padding:18px 20px 0 16px;vertical-align:top;">
<img src='logo.png' width=124 height=41 alt="Org logo" style="width:124px;height:41px;display:inline;" />
</td>
</tr>
<tr>
<td valign=bottom style="background:#f9f2c8;padding:0 20px 20px 20px;vertical-align:bottom;">
<div><img src='line.png' alt="divider" width=210 height=24 style="width:210px;height:24px;display:inline;" /></div>
<div style="font-size:13px;">06 1234 5678</div>
</td>
<td valign=bottom style="background:#96e7cf;padding:0 20px 20px 20px;vertical-align:bottom;">
<div style="font-size:14px; font-weight:600; white-space:nowrap;">tagline of the org</div>
<div style="font-size:13px;">organisation.nl</div>
</td>
</tr>
<tr>
<td colspan=2 style="padding:20px;">
<p style="font-size:13px;margin:0 0 8px 0; ">Werkzaam op maandag, dinsdag, woensdagmorgen, donderdag en vrijdag</p>
</td>
</tr>
</table>
First, make your table width 100%:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
That will make it fit the full width of its container.
Second, on the text-reduction, this whole table appears to only go down to about 415px. So if your mobile is smaller, it will scale it all as one group. To prevent that, make one or both of your images responsive. Here, I've made the divider responsive:
<div><img src="line.png" alt="divider" width="210" height="24" style="width: 100%;height: auto;display:inline;max-width: 210px!important;"></div>
I've added !important to the max-width because Outlook iOS has a default style that would change it 100% otherwise, potentially bloating your image.
Continue to use the width and height attributes because Outlook Windows desktop uses them.
Related
I have a table where one of the cells is like this:
<td>
<div class="table-wrapper">
<table class="inner-table">
<!--content-->
</table>
<div>
</td>
The div is there so I can put a border around the table, with a gap of 10px. As it displays, though, the div is the entire width of the enclosing td. What I would like is for it to be just the width of the table it wraps (plus margin, to be specified). I can't figure out the CSS to do this, simple though it no doubt is, although I've got it working with Javascript - but I would prefer to do it using CSS, if possible. I had hoped setting width:auto for the div would work, but it makes no difference,
One way is to use inline-block
<style>
.table-wrapper {
border : 1px solid black;
padding : 10px;
display : inline-block;
}
</style>
<table width="400px">
<tr>
<td>
OUTER
</td>
<td>
<div class="table-wrapper">
<table class="inner-table">
<tr><td>INNER</td></tr>
</table>
<div>
</td>
</tr>
</table>
I am using Bootstrap for my web application based on xml technologies (XForms with betterform as processor, XQuery etc.). I created it with eXist-db.
I have the following problem now: I want to create a responsive user interface and for that I want the height of the bootstrap grids fit on every screen so I want it to fill 80% of the height of the screen. But that does not really work. Here is my code:
<div class="col-md-3">
<div class="orderListRepeat">
<h3>Details</h3>
<div style="height: 80%; width: 100%; overflow-y: scroll; overflow-x: scroll;">
<table class="table table-striped">
<tr>
<td>
<b>Name:</b>
</td>
<td>
<xf:output ref="//object[index('object-repeat')]/name"/>
</td>
</tr>
<tr>
<td>
<b>Number:</b>
</td>
<td>
<xf:output ref="//object[index('object-repeat')]/number"/>
</td>
</tr>
<tr>
...
</tr>
</table>
</div>
</div>
</div>
Percentages just work on the width parameter. If I exchange the 80% of the height parameter with e.g. 500px everything works fine but percentages don't work here and I cannot understand why. In every screen resolution the table in the content is displayed completely although it overlaps the screen height.
I am thankful for every hint.
Use vh units (1 vh = 1% of vertical height of screen)
so instead of height: 80%;, use height: 80vh;
I have a div with a small width and an overflow visible. I have inside a larger table with only one cell and a text inside:
<div style="overflow:visible;width:0px;">
<table>
<tr>
<td style="border:solid">
A small text with spaces...
</td>
</tr>
</table>
</div>
I would like the width of the table to be set automotically as the text width but without breaking line. i.e. I would like to have the same result I would have if I writed only:
<table>
<tr>
<td style="border:solid">
A small text with spaces...
</td>
</tr>
</table>
How can I set the table to not be "of minimum width" without specifying a precise witdh?
I think your answer is here: Object larger than outside div
It uses the position absolute to remove the stipulations of the containers surrounding it. The one issue then is positioning, but You can fix that with setting the left and top CSS rules.
jsfiddle example
<div style="overflow:visible;width:0px;">
<table>
<tr>
<td style="border:solid;position:absolute;">
A small text with spaces...
</td>
</tr>
</table>
</div>
<div style="overflow:visible;width:0px;padding-top:30px;">
<table>
<tr>
<td style="border:solid;white-space:nowrap;">
A small text with spaces...
</td>
</tr>
</table>
</div>
EDIT
As said in a comment above by "insertusernamehere": "white-space:nowrap;" works as well.
NOTE:
Tables are not the best thing to use. Use DIV's and set the `"float:left/right;" CSS style so that they mimic tables. It is easier to code (for me at least, it takes some getting used to at first.) but it is much more browser friendly and you have more room to play in.
My table cells have a font-size of 9pt. Within these table cells there is either a spacer image or text. If it's a spacer image I just want the height of the table, the height of the spacer image (2px in this case). Code below:
<table width="100%" cellspacing="0" cellpadding="2" border="0" class="foo">
<tbody>
<tr valign="top">
<td width="100%" colspan="4" class="foo">
<img width="0" height="1" alt="" src="spacer.gif">
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="0" cellpadding="2" border="0" class="foo">
<tbody>
<tr valign="top">
<td width="100%" colspan="4" class="foo">
bar <span>barbar</span>
</td>
</tr>
</tbody>
</table>
As of right now, whether it's text or a spacer image the height of the cell is 9pt. And if this wasn't bad enough, I CANNOT change the markup. What you see is what I get.
OK, cpara :)
This is not best practice, but if you really cannot change your HTML, you could still use a stylesheet. If the styles in the stylesheet do not overwrite the HTML styles, you can also try to add !important (like width:100% !important;) to any style in your stylesheet...
Well, if the 9pt font-size is not set anywhere but the text is rendered to 9pt, it can be that you do use a separate stylesheet and the 9pt are set in either the div or the body, or your browser's standard font-size (if not font-size is set) is set to 9pt...
But great, if the answer was finally closer than thought and it works now for you :)
I am having a table as follows:
<table>
<tr style ="height: 10px;" >
<td style="width: 200px, height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td>
</tr>
</table>
The problem is, when the contents in the second column of any row are slightly large, the width of the second column exceeds 150px, and to compensate the width of the first column reduces. How can I prevent that from happening. I want to widths to not change and even if the extra texts are not shown it`s fine.
I also want the height of the rows and columns to be of 3 lines of text and fixed in height.
First off, the code was incorrect. Here's your code corrected, try does it work what you wanted it to:
<table>
<tr style="height: 10px;" >
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
</tr>
</table>
Second, the way you're styling is very old-school and hard on you, try creating a CSS class which you can then apply to every element, no need to repeat the rules. In fact, if this will be the only table on your page, you can put something like this inside head:
<style type="text/css">
td {
width: 200px;
height:10px;
}
</style>
That will apply your rules to all tags on page, so you don't have to explicitly style each and every one.
Or you can do:
<style type="text/css">
.exampleclass {
width: 200px;
height:10px;
}
</style>
<table>
<tr style="height: 10px;" >
<td class="exampleclass"></td>
<td class="exampleclass"></td>
<td class="exampleclass"></td>
<td class="exampleclass"></td>
</tr>
</table>
That way you control your styling from one place, and are also able to apply it to other elements as you see fit.
If there's anything else, ask away.
EDIT: And for fulfilling your requirement of widths being fixed at cost of extra content not showing, apply both answers of Guzzie and QQping. Although if you're ok with varying height, you don't have to set overflow:hidden;
You should set the table's style to fixed like this and add the total width of the table
<table style='table-layout:fixed' width='300px'>
Firefox may not like to see table cells with overflowing long texts cause of fixed column-widths, to better display this you should set the following TD style in your css or on your current page
<style>
td {overflow:hidden;}
</style>
Simply add max-width with to your table cell.