I need to display a table with 14 columns in the outlook mail. The column heading are some extra length and i need to show the headings in a signle line. so I am setting width for every column, but the problem is the whole table is not widening after some width. example if I give extra width it is working fine. if i give extra width to all the columns then all the columns are adjusting and all the column headings are coming in 2 or 3 lines.
I copied the source from the outlook mail and I saved the same mail and I opened with IE browser then it is working fine. I am getting problem only when with outlook client.
Can someone help me in this regards
Thanks in advance
Satish
using "min-width" property. your problem may be solved try it....
Related
I am working on a table that looks like this:
There are 2 issues here:
the column header IPV6 Address is taking small width than the body's column width. And Model and Type are not in place. How to fix this?
I want the scrollbar only when the table columns are not fitting the screen.
I see you're using white-space: nowrap. This might be the cause of your column width issues. Try removing this to see what it looks like multi-line, this will allow the table contents to at least attempt to use the available space properly without being forced over the space provided causing the effect with the "IPv6 Address" that you see.
Most of the time if I have fixed widths for columns (especially with nowrap) in any table I look to truncate the contents of the text within if I want everything to display on one line neatly and not wrap.
https://material.angularjs.org/1.1.2/api/directive/mdTruncate
I am working on cleaning up my companies newsletter emails. My issue is that I would like to force my <td> to respect the width that I specify rather than following the widths of the previous <td>. The other issue is that this needs to be very email client compatible.
Here's a jsfiddle of what I'm working on. http://jsfiddle.net/zwf0dL8r/ Sorry about the inline styles, aren't html emails great..
As you can see, the light grey areas are following the width of the first <td> which is holding the cpap.com logo.
Ideally, I wanted to be able to define the widths of <td>s to something new, each time I create a new <tbody>..
You could use CSS to force some behavior, but the browser or email client generally calculate the width of columns automatically based on content, using the widest specified width for the column when the content is shorter. To avoid this you can add the property table-layout: fixed; to the style of the table, but you will have to manually assign the correct widths for each column.
Tables with fixed layout are faster to display but don't resize according to content. The larger content overflows it's cell, causing an ugly looking overlapping data.
Take a look here for e-mail client compatibility: https://www.campaignmonitor.com/css/
Edit.:
To make the bellow cell take the space of the above cells you can add a colspan="numOfColsToTake".
What many people forget is that each <TD> define a column, not only an individual cell. Imagine you are designing it on Excel. If you would do this on Excel, you would have to use the merge cells option for the bellow cell to take the space of the 2 above. The colspan attribute of <TD> elements makes exactly this.
<td colspan="2"><p>Something</p></td>
I am working on a Newsletter and am therefore pretty much forced to use tables.
According to this source, "margin-top" and "margin-bottom" is not supported by Outlook 2007/10/13. Since Outlook is a requirement for my Newsletter, I need a workaround.
Obviously there's "cellspacing", I however do sometimes want to apply margin-top/bottom without left/right. How can this be achieved?
If you needed pixel perfect height I would pad an empty cell with a spacer (clear 1px x 1px gif).
In the end I was able to solve this problem to my satisfaction by adding empty rows (without images) with a fixed height. This actually seems to be working fine with quite a lot email clients.
I am developing website everything was done and successful , but my problem is please look attached images , if browser is in maximize position the website looks neat but in minimize situation everything comes closer and text is overlap by another, please suggest me.
Try using % value of width and height of html elements instead of its pixel values in style sheet.
Since you didn't provide actual source code, i have to guess. I guess your page layed out using tables. And either elements have no width property or they have width in percentages like . The black top bar on the first images seems like it made with a table with two columns, second column being align=right.
For table layouts to work, you should set all columns' width to some constant number. Especially first rows' columns' width must be set.
I am having a similar problem coding this email for Outlook 2010 (of course). The email is fine in most client but the width of the text ares is bigger than it should be. No matter what CSS, or html width I apply Outlook is rendering the width of the cell wider than it should be.
Preview Email Clients
Web View
I think the problem is with your colspans and rowspans. I recommend ditching them completely and layering tables instead. This will give you something similar to CSS.
Create one "container" table that is 1 column by 3 rows. Then create a new table in the top row for the header, one table in center for the body, and one in the bottom for a footer.
Then if you need to break things down even further, keep adding tables.
Good luck!