I have a php email that is received by our company's email client, microsoft outlook. I also get a copy in my gmail. Everything looks fine in gmail:
This php / html:
$remainder = <<<EOD
<tr>
<td colspan='2' style='font-size:12pt; padding:5px 0px 5px 3px; background-color:#F7F7F7;'>
Product details
</td>
</td>
<tr>
<td style="width:150px;font-size:10pt; padding:10px 8px 0px 3px;" align="left">
Product type:
</td>
<td style='font-size:10pt; padding:10px 0px 0px 0px;'>
{$product}
</td>
</tr>
<tr>
<td style='width:150px;font-size:10pt; padding:10px 8px 0px 3px;' align="left">
Quantity:
</td>
<td style='font-size:10pt; padding:10px 0px 0px 0px;'>
{$qty}
</td>
</tr>
<tr>
<td style='width:150px;font-size:10pt; padding:10px 8px 0px 3px;' align="left">
Product size:
</td>
<td style='font-size:10pt; padding:10px 0px 0px 0px;'>
{$productSize}
</td>
</tr>
<tr>
<td style='width:150px;font-size:10pt; padding:30px 8px 0px 3px;' align="left">
Account executive:
</td>
<td style='font-size:10pt; padding:30px 0px 0px 0px;'>
{$accountExec}
</td>
</tr>
produces something that looks like this in gmail: (minus the part at the top i didn't crop)
However, in microsoft outlook, I get something that looks like this (with much inflated padding.
I can see by looking at the elements in the browser (when I forward the element back to gmail from msOutlook) that several different elements are being added. Why would this happen? Is there anyway to prevent it?
How could I make this so it looks right in both?
Thanks!
I suggest wrapping the content of every table cell in a div and give the padding to that div and not the td
Related
We are using Springboot 2.1.x version
PDF is being generated using HTML/CSS/ThymeLeaf
If user is entering very large text i.e. if text is larger than page of the size than doesn't appear at all, ideally it should be broken into 2 pages.
Here is the piece of code for generating the PDF Object, we are unable to identify the property which is missing, any help is much appreciated.
<table style="width: 100%;border-collapse: collapse;border-spacing: 0;" th:fragment="SingleLine(obj)">
<tr>
<td style="color: #170e0e; font-size: 11px; padding: 8px 10px 5px 0px; font-weight: 1000;width:150px;">
<b th:text="${obj.lableName}"></b>
</td>
</tr>
<tr>
<td style="padding: 0px 10px 8px 0px;color: #2c3032; font-size: 11px; padding-right: 10px;">
<span th:each="val,iterationStatus :${obj.value}">
<span style="display: inline-block;margin-right: 5px;font-size:11px;"
th:text="${#strings.defaultString(val,'-')}"></span>
</span>
</td>
</tr>
</table> ```
There aren't any attributes like CellPadding or CellSpacing that will accomplish this for me and when I try to add css to the grid tr's to change the top and bottom margins, they are ignored. How do I add a little bit of spacing between each generated row from the gridview?
Margin doesn't work on table elements, use padding, or like in below sample, set a top and/or bottom border on your tr
table {
border-collapse: collapse;
}
td {
background: gray;
}
tr {
border: 0px solid white;
border-width: 10px 0;
}
<table>
<tr>
<td>
Hello there
</td>
</tr>
<tr>
<td>
Hello there
</td>
</tr>
<tr>
<td>
Hello there
</td>
</tr>
</table>
You can also achieve this using
border-collapse: separate;
border-spacing: 0 10px;
Snippet
table.grey-theme {
border-collapse: separate;
border-spacing: 0 10px;
margin: 50px;
}
table.grey-theme td {
border: solid #777 1px;
padding: 5px;
}
<table class="grey-theme">
<tr>
<td>Dogs</td>
<td>10</td>
</tr>
<tr>
<td>Cats</td>
<td>20</td>
</tr>
<tr>
<td>Parrots</td>
<td>30</td>
</tr>
</table>
Use it in asp:GridView like
<asp:GridView ID="PetGrid" runat="server" CssClass="grey-theme">
Here is my code snippet-
<table style="border:1px solid #898989; table-layout:fixed">
<tr>
<td width="25%" style="border:1px solid #898989; table-layout:fixed">
LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
</td>
<td width="75%" style="border:1px solid #898989; table-layout:fixed">
ShortText
</td>
</tr>
</table>
And my output looks like this-
The <td> contents don't contain space. I want the width of <td> to remain fixed as they are defined (25% for LongText... and 75% for ShortText). Are there any CSS attributes I can use?
Use this
table {
width: 100%; /* As wide as the containing block */
word-wrap: break-word; /* Allow to break too long words */
}
table {
border: 1px solid #898989;
table-layout: fixed;
width: 100%;
word-wrap: break-word;
}
td {
border: 1px solid #898989;
}
td:first-child {
width: 25%;
}
<table>
<tr>
<td>
LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
</td>
<td>
ShortText
</td>
</tr>
</table>
if you want to use CSS you can simply define the width in CSS.
<td style="width=25%; overflow:hidden; border:1px solid #898989; table-layout:fixed">
select the attribute of overflow
First you need to give a fix width to table and then any td will take width according to the table's width. I try this please check and let me know if working for you :
<table style="border:1px solid #898989; table-layout:fixed;width:600px;">
<tr>
<td width="25%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
</td>
<td width="75%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
ShortText
</td>
</tr>
</table>
It's depend on you that how much width's table you want so if you want that your table width will fixed then provide fix width otherwise if you didn't provide any width your table will took same width that it's parent div has, for example :
<div style="width:600px">
<table style="border:1px solid #898989; table-layout:fixed;width:100%;">
<tr>
<td width="25%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
</td>
<td width="75%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
ShortText
</td>
</tr>
</table>
</div>
In this case table will took 500px width because table don't have any width so it is taking same width that it's parent div has. And if you will provide width then it will take width according to that as my first comment.
I have a layout problem on my site..
I develop using MVC for it..
the layout will become a bit strange when I minimize it or I using smaller resolution..
my pc using 1366 x 768 resolution..
if I'm not minimize it, it will be okay..
but when I'm trying to make the browser smaller, it has a gap on the right..
I want to center it like www.bluenile.com website..
thank you..
Images:
before I minimize: http://i.imgur.com/aQyoAYH.png
after I minimize: http://i.imgur.com/9cWtl13.png
Thank you guys!
this is my layout:
<body class="body">
<table class="wrapper" style="width: 100%;">
<tr>
<td>
#Html.Partial("Header")
<table class="main" width="1000" border="0" cellspacing="0" cellpadding="0" style="border: 0px;"
align="center">
<tr>
<td colspan="3">#Html.Partial("TopMenu")
</td>
</tr>
<tr>
<td colspan="3" width="100%">#RenderBody()
</td>
</tr>
<tr>
<td class="sidepadding">
</td>
<td>#Html.Partial("ResourcesCentre")
</td>
<td class="sidepadding">
</td>
</tr>
<tr>
<td class="sidepadding">
</td>
<td>#Html.Partial("Networks")
</td>
<td class="sidepadding">
</td>
</tr>
</table>
<table width="1015" border="0" cellspacing="0" cellpadding="0" style="border: 0px;"
align="center">
<tr>
<td style="width: 5px; height: 1px;">
</td>
<td>#Html.Partial("Footer")
</td>
<td style="width: 5px; height: 1px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
this is my style:
.body
{
background-image: url('/Content/images/Diamond_Background_Blue.png');
font-size: 0.75em;
font-family: "Gotham Book", "Gotham Bold", "Gotham Light", "Gotham Thin", Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
.wrapper
{
margin: 0 auto 0 auto;
}
UPDATE:
After I check my css, there is a css code on navigation that make it run: position: relative.. I remove that code and now the layout okay already..
Thanks guys for your help.. :)
The trick to centering an element is to give it a width and left right margins of auto. E.g. margin: 0 auto. For more help, post an example of your code.
In your CSS just add this line on your page ,containers, wrappers etc.
{
margin:0 auto;
}
Here's a reference, How to Center a Website With CSS. If you want to test it to different screen resolution you could test it here. Hope this helps you. :)
Add margin: 0 auto to body and give it a width: 80% or something. And to make your page fluid, use width in % and not px
DEMO
As you can see in this fiddle, http://jsfiddle.net/S8Bne/64/, I am trying to draw a box shadow around the table (just the outside out it). The approach that I've taken is to create a div with slightly larger height than the thead area and give it a box shadow. However, I can't quite get it positioned properly. How can I do so?
Any solutions are welcome.
This is happening because your thead is not inside the div.
I added some height to the div to show...
Problem: http://jsfiddle.net/jasongennaro/S8Bne/54/
Add this
-webkit-box-shadow:#8A0000 2px 2px 10px;
box-shadow:#8A0000 2px 2px 10px;
to
.geniusPicks table tr#picksHeading th
And it works.
Working Example: http://jsfiddle.net/jasongennaro/S8Bne/55/
So no need for the div
If you want to add shadow to thead without using div, try the following code
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
table thead{
display:block;
position:relative;
box-shadow: 0px 1px 3px 0px #cccccc;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
table tr{
display:table;
table-layout:fixed;
width:100%;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Owner</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfred Trading</td>
<td>Alfred Thomas</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Australia</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helena Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus</td>
<td>John Cook</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>