I have the following html that works in MS Mail, outlook, ios but not with gmail. I thought placing the css as inline would fix the problem but it doesn't. The two problems are the text size appears too big. I'm wondering if there is a way to have gmail use a different font size then the other email clients. Also I need a blank line in the table and use &nbsb inside a but this appears as just &nbsb text in gmail.
UPDATE: fixed the   with But fontsize even with !important not working. It seems in gmail the margin:0 auto for the table is not working in gmail
<!DOCTYPE html>
<html>
<header>
</header>
<body lang=EN-US>
<div style="text-align:center;margin:0 auto;font-size:5vw">
<img src="cid:swb-image">
<h3 style='padding-left:10px;margin-bottom:0;margin-top:0%;padding-top:0;text-align:left'> Hi firstname, </h3>
<table style='text-align:left;margin:0 auto;' >
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<tr>
<td colspan='12' style='text-align:center'><h3 style='margin-top:8px;margin-bottom:0'> msg1</h3><h4 style='margin-bottom:8px;margin-top:0'>msg2 </h4></td>
</tr>
<tr>
<td colspan='3'>DATE:</td>
<td colspan='9'>datex</td>
</tr>
<tr>
<td colspan='3'>SKIPPER:</td>
<td colspan='9'>skipperx</td>
</tr>
<tr>
<td colspan='3'>BOAT:</td>
<td colspan='9'>boat</td>
</tr>
<tr>
<td colspan='3'>STATUS:</td>
<td colspan='9' style='color:colorx'>status</td>
</tr>
<!--<tr><td> </td></tr> -->
<tr>
<td colspan='4'> </td>
<td colspan='4' style='text-align:center;'>Start</td>
<td colspan='4' style='text-align:center;'>END</td>
</tr>
<tr>
<td colspan='4'>ressailxcl:</td>
<td colspan='4' style='font-weight:bold;text-align:center'>start</td>
<td colspan='4' style='font-weight:bold;text-align:center'>end</td>
</tr>
<tr>
<td colspan='12' style='text-align:center'><h5 style='margin-bottom:1%;'>Click on link to update your availability</h5></td>
</tr>
<tr>
<td colspan='4' style='text-align:left;'><a style='text-decoration:none;' href='mailto:skipemail'>
<img src="http://www.sailwbob.com/skipper/public/img/email-32.png" style="width:32px;height:32px;border:0;"></a></td>
<td colspan='4' style='text-align:center;'><h5> <a href='http://www.sailwbob.com/skipper'>SwB link</a></h5></td>
<td colspan='4' style='text-align:right';><a style='text-decoration:none' href='tel:skipphone'>
<img src="http://www.sailwbob.com/skipper/public/img/phone-32.png" style="width:32px;height:32px;border:0;"></a></td>
</tr>
</table>
</div>
<div>
<!--skipmsg-->
</div>
</body>
</html>
so the problem was really just:
font-size:5vw;
In gmail it's just too large but in other places the 5vw was working just fine.
The solution, within style tags I added:
font-size:5vw!important
and in the inline css for the div changed the size to 16px. So, in browsers that need the 5vw (they accept the style tag) they get that size and in places that don't accept the style tags they get 16px. Ugly, but it works
Related
I use easyui-panel with one table in my project.
I want to fixed each td width:50px;
Here is my code:
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style="width:100%" >
<tr>
<td style="position:absolute;width:50px;background-color:#fafafa">stack</td>
<td style="position:absolute;width:50px;background-color:#fafafa">john</td>
<td style="position:absolute;width:50px;background-color:#fafafa">stock</td>
<td style="position:absolute;width:50px;background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="postion:absolute;width:50px;background-color:#fafafa">Joy</td>
</tr>
</table>
</div>
But it works fail. stack,john and stock are disappear. My table is in an abnormal stat.
When I deleted "position:absolute;width:50px;", all names can be show.like:
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style="width:100%" >
<tr>
<td style="background-color:#fafafa">stack</td>
<td style="background-color:#fafafa">john</td>
<td style="background-color:#fafafa">stock</td>
<td style="background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="background-color:#fafafa">Joy</td>
</tr>
</table>
</div>
All names can appear without fixed width, but it is not what i want.
Who can help me ?
You don't need to remove both position:absolute and width:50px.
Removing position:absolute and the width:100% from the <table> should result in what you want. So now your HTML looks like
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0">
<tr>
<td style="width:50px;background-color:#fafafa">stack</td>
<td style="width:50px;background-color:#fafafa">john</td>
<td style="width:50px;background-color:#fafafa">stock</td>
<td style="width:50px;background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="width:50px;background-color:#fafafa">Joy</td>
</tr>
</table>
If it doesn't result in what you want, it is possible that some CSS styles are adding additional padding or margins to the <td> element. Fire up the developer console (F12 on most browsers) -> right click on your element -> Inspect and in the CSS styles part look at the box model to find out if there is any additional padding/margins being applied
You can set your HTML talbe to be fixed width, then specify column widths:
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style=" table-layout:fixed;" >
<col width="5px" />
<col width="5px" />
<col width="5px" />
<col width="5px" />
<col width="5px" />
<tr>
<td style="background-color:#fafafa">stack</td>
<td style="background-color:#fafafa">john</td>
<td style="background-color:#fafafa">stock</td>
<td style="background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="background-color:#fafafa">Joy</td>
</tr>
</table>
</div>
https://jsfiddle.net/56Lc4o44/
When I use unified format, It works OK
The code is:
<style>
.uTbId tr td{width:100px;background-color:#fafafa}
.uTbId tr td:hover{background-color:#0000CD;color:green;}
</style>
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style="width:100%" >
<tr>
<td >stack</td>
<td >john</td>
<td >stock</td>
<td >shansa</td>
</tr>
<tr>
<td>Joy</td>
</tr>
</table>
Table cell image and cell background image is not displaying:
<table border="1">
<colgroup>
<col width="150"/>
<col width="350"/>
</colgroup>
<tbody>
<tr>
<td height="100%" width="92%"><image src="../images/refresh.jpg" alt="Test"></td>
<td background="https://media.giphy.com/media/10S1CGpBU06FZ6/giphy.gif" width="8%"></td>
</tr>
</tbody>
</table>
Just try this.
<table border="1">
<colgroup>
<col width="150"/>
<col width="350"/>
</colgroup>
<tbody>
<tr>
<td height="100%" width="100%"><img src="../images/refresh.jpg" alt="Test"></td>
<td style="background:url(../images/refresh.jpg);" width="100%"></td>
</tr>
</tbody>
</table>
Since it is img not image and TD element dosn't have the background attribute, you can put your custom style inside the style attribute just like above.
Try using this:
<td style="background-image: url('../images/refresh.jpg')" width="100%">
Also, it's probably pretty likely that your path is incorrect. Try inserting:
<?php if(file_exists("../images/refresh.jpg")){
echo "IT EXISTS!";
}
else{
echo "NOT FOUND!";
}
?>
That should tell you if your path is correct or not.
<image> is not a tag, it is abbreviated the to <img>, so it should be something like this: <**img** src="../images/refresh.jpg" alt="Test">.
In the following example I added an image from the net to show you:
td {
border: solid 1px black
}
<table border="1">
<colgroup>
<col width="150" />
<col width="350" />
</colgroup>
<tbody>
<tr>
<td height="100%" width="100%"><img src="http://lorempixel.com/400/200" alt="Test"></td>
<td style="background:url(../images/refresh.jpg);" width="100%"></td>
</tr>
</tbody>
</table>
Hope it helped.
You are probably not seeing anything since the first td is 100%.
Change the first td to take up 92% or anything less than 100% of the width.
<td height="100%" width="92%"><image src="../images/refresh.jpg" alt="Test"> </td>
<td background="../images/refresh.jpg" width="8%"></td>
<table border="1">
<colgroup>
<col width="150"/>
<col width="350"/>
</colgroup>
<tbody>
<tr>
<td height="100%" width="92%"><image src="../images/refresh.jpg" alt="Test"></td>
<td background="https://media.giphy.com/media/10S1CGpBU06FZ6/giphy.gif" width="8%"></td>
</tr>
</tbody>
</table>
I've got a little webpage I've been working on for the fun of it, but there is an undesired result.
There are 2 tables that by default show up with the columns aligned, as I desire. They both have 100% page width, and the cells within share the same specified width. The final cell does not have a width specified so that it can expand if the page width is increased thus keeping the table at 100% of the page width. No heights are specified so cells can grow infinitely if needed.
Table 1:
<!-- box_sorting -->
<table style="z-index:2;position:fixed;top:196px;margin-top:0px;margin-left:auto;margin-right:auto;margin-bottom:0px;width:100%;min-width:1200px;background-color:#CCC;text-align:center;vertical-align:middle;font:12px Arial, Helvetica, sans-serif;color:#333;word-wrap:break-word;border-top:solid;border-left:solid;border-size:1px;border-color:#CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="75">Track</td>
<td width="300">Song</td>
<td width="300">Album Artist</td>
<td width="300">Album</td>
<td width="100">Genre</td>
<td width="75">Rating</td>
<td>Comments</td>
</tr>
</table>
Table 2:
<!-- box_tracklisting -->
<table style="z-index:1;position:relative;top:216px;margin-top:0px;margin-left:auto;margin-right:auto;width:100%;min-width:1200px;text-align:center;vertical-align:middle;font:12px Arial, Helvetica, sans-serif;color:#333;word-wrap:break-word;border-left:solid;border-size:1px;border-color:#CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="75">1 of 11</td>
<td width="300">Believer</td>
<td width="300">American Authors</td>
<td width="300">Oh, What A Life</td>
<td width="100">Indie</td>
<td width="75">Good</td>
<td></td>
</tr>
The problem I'm having is that if the browser width decreases the top table shrinks too much, and no longer aligns with the bottom table. How can I prevent this?
How It Looks Normally:
How It Looks When Browser Window Width Is Reduced:
I'm using Mozilla Firefox, but I would prefer an answer that is compatible with the 5 major browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Opera, and Safari. The page is optomized for viewing at a width of greater than 1200px. If you view it with a browser window of less than that there will be a horizontal scrollbar.
I think the best thing for this would be to utilise a jQuery plugin called DataTables
I've put some of your data into a dummy table so you can see how it works. Note the HTML is in order of 1,2,3,1,2,3 but the default load is to sort numerically, ie 1,1,2,2,3,3. There are loads of options to explore with DataTables; you could turn off the sorting feature, or give each track an index number.
http://jsfiddle.net/kDvp5/
For the sake of links going down in future, the example this is based off: http://www.datatables.net/examples/basic_init/scroll_y.html
HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
} );
} );
Yeah, I would NOT use two separate tables and stick to the traditional layout using TH header. If you want it to be fixed, just set the position to fixed:
<tr style="position: fixed;">
<th width="75">Track</th>
<th width="300">Song</th>
<th width="300">Album Artist</th>
<th width="300">Album</th>
<th width="100">Genre</th>
<th width="75">Rating</th>
</tr>
<tr>
<td width="75">1 of 11</td>
<td width="300">Believer</td>
<td width="300">American Authors</td>
<td width="300">Oh, What A Life</td>
<td width="100">Indie</td>
<td width="75">Good</td>
<td></td>
</tr>
However many tables you wish to use, the "width" attribute is deprecated. You can use a colgroup instead for both tables:
<colgroup>
<col style="width: 75px;" />
<col style="width: 300px;" />
<col style="width: 300px;" />
<col style="width: 300px;" />
<col style="width: 100px;" />
<col style="width: 75px;" />
<col />
</colgroup>
Add the colgroup to the beginning of each table, between <table> tag and your first <tr>. Should work uniformly across all browsers. You can also use CSS classes and assign column widths for both tables simultaneously, which would make changing them later on much easier.
In your HTML, in both tables:
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
<col />
</colgroup>
<tr>
<etc....>
Then, in your CSS:
.col1 { width: 75px; }
.col2 { width: 300px; }
.col3 { width: 300px; }
.col4 { width: 300px; }
.col5 { width: 100px; }
.col6 { width: 75px; }
... should get you what you need.
When I run the code below, the proportions are all off. What do I need to change to get the right spacing? The columns on the bottom labeled 2 are about 4/5ths the size of the ones on top marked 4.
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup> <!-- Sets up table for spacing -->
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
</colgroup>
<tr>
<td colspan="4">4</td>
<td colspan="2">2</td>
<td colspan="4">4</td>
</tr>
<tr>
<td colspan="10">10</td>
</tr>
<tr>
<td colspan="5">5</td>
<td colspan="5">5</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="6">6</td>
<td colspan="2">2</td>
</tr>
</table>
</body>
The table markup violates the HTML table model, as you can see by using http://validator.org on the markup with HTML5 as the selected version; it says e.g. “Table column 2 established by element col has no cells beginning in it.” This means that anything may happen.
You should correct the markup so that for each column, there is at least one cell that begins in it, as required by the table model. Alternatively, as this seems to be an attempt at complicated layout with table, rather than tabular data, consider other options such as CSS layout.
I created a Bingo Card using Table in HTML. In the second column if I use the letter I, the size of the column automatically reduces and if I use any other letter then size of column comes back to normal. Why its happening so?
Table Image (using I in Column 2): http://imageshack.us/photo/my-images/21/18575712.png/
Table Image (using A in Column 2): http://imageshack.us/photo/my-images/580/11014314.png/
<html>
<head>
<title>Bingo Card</title>
</head>
<body>
<h2>Bingo Card</h2>
<table border="1px" width="50%">
<tr>
<th>B</th>
<th>A</th>
<th>N</th>
<th>G</th>
<th>O</th>
</tr>
<tr>
<td id="square0"> </td>
<td id="square1"> </td>
<td id="square2"> </td>
<td id="square3"> </td>
<td id="square4"> </td>
</tr>
<tr>
<td id="square5"> </td>
<td id="square6"> </td>
<td id="square7"> </td>
<td id="square8"> </td>
<td id="square9"> </td>
</tr>
<tr>
<td id="square10"> </td>
<td id="square11"> </td>
<td id="square12"> </td>
<td id="square13"> </td>
<td id="square14"> </td>
</tr>
<tr>
<td id="square15"> </td>
<td id="square16"> </td>
<td id="square17"> </td>
<td id="square18"> </td>
<td id="square19"> </td>
</tr>
<tr>
<td id="square20"> </td>
<td id="square21"> </td>
<td id="square22"> </td>
<td id="square23"> </td>
<td id="square24"> </td>
</tr>
</table>
</body>
</html>
I see the same issue in Chrome when column 2 contains an A. If you want to have a guaranteed column width you should explicitly define its size using either the <colgroup> tag or a corresponding width attribute:
<table border="1px" width="50%">
<colgroup>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
</colgroup>
...
or
<tr>
<th style="width:20%">B</th>
...
The browsers just does not make any guarantee if you do not explicitily define the widths for the different columns.
UPDATE: From the HTML4 specification:
If an author specifies no width information for a column, a user agent
may not be able to incrementally format the table since it must wait
for the entire column of data to arrive in order to allot an
appropriate width.
You could try change the column width with css...
And I think it's happening because of the letter 'I' is "thin" compared to other letters, but I don't sure about that...
I think each character takes some space the width of i is less than A, to get resolved use a css style
td{width:20%} this should get resolved
In this simple case, it suffices, for most browsing situations, to set the column widths to the same (20%). However, in general, table cell and column width settings in HTML and CSS are just suggestions and may be overridden by browsers, on the basis of the contents requirements. (You can see this if you use a very narrow browser window width here.)
The way to prevent this is to use “fixed” table layout, e.g.
<style>
table { table-layout: fixed; }
th { width: 20%; }
</style>
“Fixed” layout has its implications. For example, if the content does not fit, it will get truncated.