I'm having some grief with tables I'm trying to set up in WordPress. Have a look here - the page looks OK when at a normal desktop width (say 1000px), but when you narrow it down below about 750px, the tables start repeating information for no apparent reason. I've flicked through my CSS and through my tables themselves and can't seem to find any immediate reason why. This is only a problem for when mobile users try to view the page.
One of the tables is as follows.
<table style="height: 25px;" border="1" width="673" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>WEEK</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>PRICE</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>AVAILABLE</strong></em></td>
</tr>
</tbody>
</table>
<table style="height: 120px;" border="1" width="673" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> 3rd Jan to 10th Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>Available </strong></em></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>10th Jan to 17th Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <strong><em>Available </em></strong></strong></em></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>17th Jan to 24th Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <strong><em>Available </em></strong></strong></em></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>24th Jan to 31st Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><span style="color: #ff0000;"><em><strong> <span style="color: #000000;"><strong><em>Available </em></strong></span></strong></em></span></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><b><i>31st Jan to 7th Feb</i></b></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <span style="color: #ff0000;"><strong><em>BOOKED</em></strong></span></strong></em></td>
</tr>
</tbody>
</table>
Any ideas why this might be doing this?
It's hard to know for sure without seeing your CSS, but there will be a breakpoint set for 785px that displays elements with class 'pinned', making the duplicate table entries appear.
try:
#media all max-width: 785px {
.pinned {
display:none !important;
}
}
Related
I'm trying to create a clickable HTML table that doesn't make the text appear hyperlinked -- and that makes the entire table linked. After spending hours sifting through the previous posts on this topic, I thought I had figured the code out and got it to work in an HTML editor.
However, when I send myself test email samples, the code is not working. In Outlook, the table appears clickable but is not linked. In Gmail, it doesn't appear clickable and is not linked.
A very helpful commenter let me know that I can't have an <a> tag outside the table, but if I move the <a> tag to inside the <td> then it will only link the text, not the whole table.
Is there a workaround for this?
Here is my code:
<a href="http://google.com" style="text-decoration:none">
<table align="center" border="1" cellpadding="10" cellspacing="0" style="width:200px;">
<tbody>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
</tr>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
</tr>
</tbody>
</table>
</a>
Thanks so much in advance
Add a style color: inherit;in your <a> tag. It should looks like this:
<a href="http://google.com" style="text-decoration:none;color:inherit">
<a href="http://google.com" style="text-decoration:none;color:inherit">
<table align="center" border="1" cellpadding="10" cellspacing="0" style="width:200px;">
<tbody>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
</tr>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
</tr>
</tbody>
</table>
</a>
I have a invoice design which I have replicated in html. Here is the fiddle.
The snippets of html table which I have used in the fiddle is:
<table style="width:100%;display: flex;
justify-content: center;">
<tbody style="font-size:20px;padding-left: 15%;">
<tr>
<td style="padding-bottom: 3%;text-align:right;">how many</td>
<td style="padding-bottom: 3%;padding-left: 10%;">2</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">when:</td>
<td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
width: 300px;" >March 28/18 # 7:00pm to March 30/18 # 7:00pm</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">who:</td>
<td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
</tr>
</tbody>
</table>
Problem Statement:
I am wondering if the table I have used above is the right way to use in html email or if there is any changes I need to make ? The reason why I am asking this because I have never coded html emails before.
Using Flex in html-emails is not fully supported by Gmail, yahoo, outlook.com Check these two helpful links below:
Old question on stackoverflow.
Support guid
If you follow normal table layout approach it would be supported by the majority of email clients, as I noticed that you also used <div> tag which will raise a flag as well.
This code might need more work and styling but just to show how this works better than using display: flex:
<html>
<body>
<p style="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="mobile" style="margin: 0 auto;" align="center">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style=" font-size:20px; padding: 0 0 0 15%;">
<tr>
<td style="padding-bottom: 3%;text-align:right;">type:</td>
<td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
<td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">what</td>
<td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">how many</td>
<td style="padding-bottom: 3%;padding-left: 10%;">2</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">when:</td>
<td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
width: 300px;">March 28/18 # 7:00pm to March 30/18 # 7:00pm</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">who:</td>
<td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<h2 style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
</td>
</tr>
<tr style="text-align: left;margin-left: auto;width: 50%;padding-right: 0%; margin-right: auto;color:#484848;font-size:20px;" class="steps">
<td>
<p>1. click here to open the ABC app to the posting requests page </p>
<p>2. click on availability check request</p>
<p>3. say yes, its availabile ot suggest another date it is</p>
<p>4. wait the 1 or 24 hour confirmation good</p>
<p>5. three days after the booking ends money will be send to your account</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I tried searching for solutions in stack, but none of the answers I found addressed my issue.
I'm developing an email and I want to have a single cell row that has text with an image in between the text. The cell height is the full height of the image, but I want the text to be vertically centered. The text is now flush on the bottom
Here's my code (there's many inline styles, I apologize in advance). Please note this a single column row that is part of the fluid hybrid approach by Nicole Merlin.
<tr>
<td valign="middle" bgcolor="#e2f4ff" style="padding:0">
<table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td valign="middle" style="vertical-align: middle !important;;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
THE<img src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" /> OF SAFE SLEEP FOR DOGS
</td>
</tr>
</table>
</td>
</tr>
Just vertically align the image.
<table>
<tr>
<td valign="middle" bgcolor="#e2f4ff" style="padding:0">
<table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
THE
<img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" />OF SAFE SLEEP FOR DOGS
</td>
</tr>
</table>
</td>
</tr>
</table>
The best solution that works for all email clients is to push them to consider putting that particular image inline with the other text. That can be done by put the text and the image in many <td> of the same single row <tr>.
This will make you able to define the exact height, width and any other attributes you want of each tag.
Check the following:
<table>
<tr>
<td valign="middle" bgcolor="#e2f4ff" style="padding:0">
<table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td valign="middle">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
THE
</td>
<td valign="middle" style="vertical-align: middle !important;padding:0;">
<img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" />
</td>
<td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;"> OF SAFE SLEEP FOR DOGS
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Hello I was wondering if it's possible with a css table to have alternating colour rows? I would like it to look like this,
http://i.imgur.com/zT04atv.jpg
My code so far for the table is this. I have tried but just can't seem to get it to work. Is this possible? And if so how would I implement it? Thanks.
<table style="height: 448px;" width="1007">
<tbody>
<tr>
<td style="text-align: center;">
<p>Pricing</p>
<p>Structure</p>
</td>
<td style="text-align: center;">
<p>Professional</p>
<p>Resume</p>
<p>$199</p>
</td>
<td style="text-align: center;">
<p>Managerial</p>
<p>Resume</p>
<p>$299</p>
</td>
<td style="text-align: center;">
<p>Executive</p>
<p>Resume</p>
<p>$399</p>
</td>
<td style="text-align: center;">
<p>C-Suite</p>
<p>Resume</p>
<p>$499</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Resume Specs</td>
<td style="text-align: center;">2-3 pg resume</td>
<td style="text-align: center;">4-5 pg resume</td>
<td style="text-align: center;">
<p>+ cover sheet and</p>
<p>graphics</p>
</td>
<td style="text-align: center;">+ standalone bio pg</td>
</tr>
<tr>
<td style="text-align: center;">Phone Interview</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">
<p>Tick</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Draft To Approve</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
</tr>
<tr>
<td style="text-align: center;">Template Options</td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
</tr>
<tr>
<td style="text-align: center;">Extras</td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td style="text-align: center;">
<p>+ Free LinkedIn</p>
<p>profile</p>
</td>
<td style="text-align: center;">
<p>+ Free LinkedIn</p>
<p>profile</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Delivery</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Cover Letter</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
</tr>
<tr>
<td style="text-align: center;">
<p>If your not sure where</p>
<p>your job would fit, please</p>
<p>get in touch to discuss </p>
<p>your arrangements</p>
</td>
<td style="text-align: center;">
<p>Vocations (such as</p>
<p>teaching & nursing)</p>
<p>Early career professionals</p>
</td>
<td style="text-align: center;">
<p>Managers and Senior</p>
<p>professionals (lawyers,</p>
<p>medical doctors), BDM's</p>
<p>consultants...</p>
</td>
<td style="text-align: center;">
<p>Senior Managers and Exec</p>
<p>Directors (Operations</p>
<p>Managers, GMs, Head of</p>
<p>Department</p>
</td>
<td style="text-align: center;">
<p>CEOs, CFOs, COOs, CIOs,</p>
<p>Managing Directors, Board</p>
<p>Members & Non-Execs,</p>
<p>Practice Directors & Principals</p>
</td>
</tr>
</tbody>
</table>
You can use the CSS3 that allows to put style to the odd or even elements of a selector.
td:nth-child(odd) {
background: #ff0000;
}
td:nth-child(even) {
background: #0000ff;
}
I have been trying all morning to replicate the below however I cannot get the alignment correct, it seems that a row will match the height of the biggest td, I need to replicate this as pixel perfect as possible.
Below is my HTML,
<table cellspacing="0" cellpadding="0" border="0" align="center" style="height: 268px; width: 700px;">
<thead>
<tr>
<th valign="middle" align="center" style="height: 27px;" scope="col">Information</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Education & Training</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Marketing Services</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Digital Media</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Entertainment</th>
<th valign="middle" align="center" style="height: 27px;" scope="col">Business Services</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" align="center" style="height: 27px;">Academic</td>
<td valign="middle" align="center" style="height: 27px;">For-profit schools</td>
<td valign="middle" align="center" style="height: 27px;">Agency</td>
<td valign="middle" align="center" style="height: 27px;">Internet</td>
<td valign="middle" align="center" style="height: 27px;">TV and Radio Broadcasting</td>
<td valign="middle" align="center" style="height: 27px;">Business Process Outsourcing</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">STM</td>
<td valign="middle" align="center" style="height: 27px;">Educational Technology</td>
<td valign="middle" align="center" style="height: 27px;">Digital</td>
<td valign="middle" align="center" style="height: 27px;">Mobile Distribution</td>
<td valign="middle" align="center" style="height: 27px;">Cinema</td>
<td valign="middle" align="center" style="height: 27px;">B2B Services</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Financial</td>
<td valign="middle" align="center" style="height: 27px;">Educational Services</td>
<td valign="middle" align="center" style="height: 27px;">Market Research</td>
<td valign="middle" align="center" style="height: 27px;">Online Gaming</td>
<td valign="middle" align="center" style="height: 27px;">Film, TV, Music and Sports Content and Rights</td>
<td valign="middle" align="center" style="height: 27px;">SaaS</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Business</td>
<td valign="middle" align="center" style="height: 27px;">Professional Training</td>
<td valign="middle" align="center" style="height: 27px;">Outdoor</td>
<td valign="middle" align="center" style="height: 27px;">Social Media</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Trade</td>
<td valign="middle" align="center" style="height: 27px;">Vocational Training</td>
<td valign="middle" align="center" style="height: 27px;">Public Relations</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Consumer</td>
<td valign="middle" align="center" style="height: 27px;">Sales Promotion</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Professional</td>
<td valign="middle" align="center" style="height: 27px;">Direct Marketing</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;">Lead Generation</td>
</tr>
<tr>
<td valign="middle" align="center" style="height: 27px;"> </td>
<td valign="middle" align="center" style="height: 27px;"> </td>
</tr>
</tbody>
</table>
and my CSS,
#left table {
border:0 none;
}
#left th {
height:43px;
background:url(images/th_bg.jpg) top left repeat-x;
font-size:14px;
color:#fff;
font-family:"Times", "Times New Roman", "Serif";
}
#left tbody td {
text-align:center;
background:#99abb9;
border-right:1px solid #fff;
width:105px;
padding:10px 15px 0px 15px;
height:17px;
}
Looks like only two rows to me. A header row of th tags and a single row of td tags, each with a list of items.
You try to make one table-row per entry, but on the picture it looks like there are only two rows. One for header and one for data (data seperated by <br /> or with <p>...</p>).
Here is an shortened example (less columns, only basic formatting - you have to add the rest) just to show how it works:
<style type='text/css'>
thead > tr > td {
text-align:center;
vertical-align:middle;
background-color:#777777;
width:107px;
}
tbody > tr > td {
text-align:center;
background-color:#99abb9;
}
</style>
<table cellspacing="2px" border="0">
<thead>
<tr>
<td>Information</td>
<td>Education & Training</td>
<td>Marketing Services</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Academic<br /><br />
STM<br /><br />
Financial<br /><br />
Business<br /><br />
...
</td>
<td>
For-profit schools<br /><br />
Educational Technology<br /><br />
Educational Services<br /><br />
...
</td>
<td>
Agency<br /><br />
Digital<br /><br />
Market Research<br /><br />
Outdoor<br /><br />
Public Relations
</td>
</tr>
</tbody>
</table>
I have made a completely working demo, at http://dcm.net46.net/test/so/so.html. To make all the columns the same height, I just filled in the extra space with empty tds. To style the columns, I used colgroup and col elements. The rest was pretty easy.