I’ve set up the POST SMTP plugin, and I’m getting the emails. However its not arriving as HTML format, even though Post SMTP log shows it as a HTML. The content of the email is correct, only problem it shows as plain text. Any idea how can i fix this?
Code that sends the email is:
add_filter( 'wp_mail_content_type', 'set_html_content_type' );
try { wp_mail($to, $subject, $this->getResult()); }
catch (Exception $e) { $result = false; }
remove_filter( 'wp_mail_content_type', 'set_html_content_type' );
function set_html_content_type() {
return 'text/html';
}
Here is the email I get:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="hu">
<head>
<meta charset="utf-8" />
<meta name="author" content="DYB Group - http://dyb.hu/" />
<meta name="Description" content='' />
<title>i-Cell díjbekérő</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="98%" style="background:#f4f4f4; font-family: Arial; font-size: 16px; color:#404040; text-align:center; table-layout:fixed;">
<tr style="line-height:0px;">
<td> </td>
<td width="1000" height="80" >Dokumentum letöltése PDF formátumban:kattintson ide</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="1000" style="background:#fff; line-height:24px;">
<table width="1000" cellpadding="0" cellspacing="0" border="0" style="border-bottom:2px solid #ccc; text-align:left; table-layout:fixed;">
<tr>
<td> </td>
<td width="800" style="font-family: Arial; vertical-align:middle;">
<h1 style='text-align: left; text-transform:uppercase; color:#666; font-size:24px; font-family: Verdana; vertical-align:middle;'>
<img src="http://icell.hu/mail/fejlec.jpg" alt="i-Cell" height="60px">
Díjbekérő
</h1>
<table style="width: 100%; table-layout:fixed;">
<tr>
<td style="border: 1px solid #ccc; white-space: nowrap; padding:20px;" valign="top" width='50%'>
<h2 style='text-transform:uppercase; color:#f36f21; font-size:18px; font-weight:normal; font-family: Verdana;'>Szállító</h2>
<p>
<strong style="font-size: 18px;">i-Cell Kft</strong><br />
<span style="font-size: small;">1143 Budapest</span><br />
<span style="font-size: small;">Hungária köz 5.</span><br />
<span style="font-size: small;">Adószám: 11756420-2-42</span><br />
<span style="font-size: small;">Cégj. szám: 01-09-674965</span><br />
<span style="font-size: small;">Bank neve: MKB Bank Zrt.</span><br />
<span style="font-size: small;">SWIFT: MKKBHUHB</span>
</p>
</td>
<td style="border: 1px solid #ccc; padding:20px" valign="top">
<h2 style='text-transform:uppercase; color:#f36f21; font-size:18px; font-weight:normal; font-family: Verdana;'>Vevő</h2>
<p>
<strong style="font-size: 18px;">Tóth András</strong><br />
<span style="font-size: small;">Ország: Magyarország</span><br />
<span style="font-size: small;">Székhely: 1112, Budapest, Löveg utca 3/f, 2/2</span><br />
<span style="font-size: small;">Szállítási cím: Magyarország: 1112, Budapest, Löveg utca 3/f, 2/2</span><br />
<span style="font-size: small;">Adószám: 0123456789</span><br />
<span style="font-size: small;">E-mail: totand92#gmail.com</span><br />
<span style="font-size: small;">Mobilszám: 203169271</span><br />
<span style="font-size: small;">Fizetési mód: Banki átutalás</span><br />
</p>
</td>
</tr>
</table>
<table style="width: 100%; table-layout:fixed;">
<tr>
<td style="text-align: center; padding-top:20px;">
<span style="font-size:16px; text-transform:uppercase; color:#f36f21; margin-top:20px; font-family: Verdana;">Díjbekérő sorszáma</span>
</td>
<td style="text-align: center; padding-top:20px;">
<span style="font-size:16px; text-transform:uppercase; color:#f36f21; margin-top:20px; font-family: Verdana;">Díjbekérő kelte</span>
</td>
<td style="text-align: center; padding-top:20px;">
<span style="font-size:16px; text-transform:uppercase; color:#f36f21; margin-top:20px; font-family: Verdana;">Fizetési határidő</span>
</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: small;">D18/2775</span></td>
<td style="text-align: center;"><span style="font-size: small;">2018-08-14</span></td>
<td style="text-align: center;"><span style="font-size: small;">2018-08-21</span></td>
</tr>
</table>
<div>
<table style="width: 100%; text-align:left; table-layout:fixed;" cellpadding="4">
<tr>
<td style="background:#f5f5f5; border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;"><strong>Termék neve</strong></span>
</td>
<td style="background:#f5f5f5; border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;"><strong>Mennyiség (db)</strong></span>
</td>
<td style="background:#f5f5f5; border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;"><strong>Egységár (HUF)</strong></span>
</td>
<td style="background:#f5f5f5; border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;"><strong>Nettó összesen (HUF)</strong></span>
</td>
<td style="background:#f5f5f5; border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;"><strong>ÁFA kulcs (%)</strong></span>
</td>
<td style="background:#f5f5f5; border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;"><strong>ÁFA (HUF)</strong></span>
</td>
<td style="background:#f5f5f5; border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;"><strong>Bruttó összesen (HUF)</strong></span>
</td>
</tr>
<tr>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;"><strong>OBU S550</strong></span>
</td>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;">1</span>
</td>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;">29900</span>
</td>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;">29900</span>
</td>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;">27</span>
</td>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;">8073</span>
</td>
<td style="border: 1px solid #ccc; text-align: right; padding-right: 20px;">
<span style="font-size: small;">37973</span>
</td>
</tr>
<tr>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;"><strong>Kiszállítási költség</strong></span>
</td>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;">1</span>
</td>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;">0</span>
</td>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;">0</span>
</td>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;">27</span>
</td>
<td style="border: 1px solid #ccc; text-align: center; padding: 2px;">
<span style="font-size: small;">0</span>
</td>
<td style="border: 1px solid #ccc; text-align: right; padding-right: 20px;">
<span style="font-size: small;">0</span>
</td>
</tr>
</table>
<table style="width: 100%; margin-bottom: 0; table-layout:fixed;">
<tr>
<td style="background-color: #f36f21; width: 60%; padding-left: 20px; height:40px;">
<span style="font-size: 16px; color:#fff">
<strong>Számlaszám: (HU11) 10300002-10590929-49020015</strong>
</span>
</td>
<td style="background-color: #f36f21; width: 40%; padding-left: 20px; height:40px;">
<span style="font-size: 16px; color:#fff"><strong>Fizetendő: 37973 HUF</strong></span>
</td>
</tr>
</table>
</div>
<table>
<tr>
<td align="center" style="font-size: small; padding-bottom: 1em; text-decoration: underline;">
<strong>
Amennyiben az Ön cége EU tagországbeli, akkor kérjük, fokozottan ügyeljen az EU adószám pontos megadására! Hibásan megadott EU adószám esetén sajnos nincs módunkban ÁFA mentes számlát küldeni, így ebben az esetben a számlán fel fogjuk számítani a magyar törvények szerinti 27 % ÁFA-t!
</strong>
</td>
</tr>
<tr>
<td align="center" style="font-size: small; padding-bottom: 1em; text-decoration: underline;">
<strong>A díjbekérő fizetési kötelezettséget nem tartalmaz!</strong>
Jelen díjbekérő ÁFA visszaigénylésre nem jogosít.
</td>
</tr>
<tr>
<td align="center" style="font-size: small; padding-bottom: 1em;">
Kérjük, hogy a megrendelt termékek ellenértékeként utalja át a jelen Díjbekérőn szereplő összeget az i-Cell Kft. számlaszámára.
<strong style="color:#f36f21">Kérjük fizetéskor – a banki megjegyzés rovatban - mindig hivatkozzon a díjbekérő (vagy az OBU) sorszámára!</strong>
A pénzügyi teljesítést követően a számlát a megrendelt termékekkel együtt küldjük ki.
</td>
</tr>
<tr>
<td align="center" style="font-size: small; padding-bottom: 1em;">
A pontatlan adatmegadás (szállítási cím, értesítési mobil szám) miatt a termékek ismételt kézbesítéséből származó esetleges pluszköltség a Vevőt terheli.
</td>
</tr>
<tr>
<td align="center" style="font-size: small; padding-bottom: 1em;">
Magyarországon belüli termék kiszállítás esetén a szállítás díját 10.000 Ft feletti megrendelés esetén az i-Cell Kft. fizeti, a Vevő részére díjmentes.
</td>
</tr>
<tr>
<td align="center" style="font-size: small; padding-bottom: 1em;">
Külföldre történő szállítás esetén a kiszállítási díjat a Vevő fizeti. A kiszállítási díj a termékekkel együtt kerül kiszámlázásra.
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="800" height="80">
</td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="1000" style="background-color:#e8e8e8; text-align:center;">
<table width="1000" cellpadding="0" cellspacing="0" border="0" style="font-size: 14px; font-family: Arial; text-align:center; table-layout:fixed;">
<tr>
<td> </td>
<td width="800" height="30"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="800" height="20" valign="top" style="line-height:10px; border-bottom:1px solid #ccc;">
<h2 style='font-size:18px; font-weight:normal; color:#f36f21;'>i-Cell Kft.
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="800" height="28" valign="bottom" style="line-height:22px;">
<b>Cím:</b> 1143 Budapest Hungária köz 5. <b style='margin-left:20px'>E-mail: </b>info#icell.hu <b style='margin-left:20px'>Tel.:</b> +36 (1) 467 1750
<td> </td>
</tr>
<tr>
<td> </td>
<td width="800" height="100">
<img src="http://icell.hu/mail/lablec.png" alt="i-Cell" width="800px">
</td>
<td> </td>
</tr>
<tr>
<td height="25"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="1000" height="65" valign="bottom" style="text-align:center; font-size:11px; line-height:15px; color:#404040;">
Ez az e-mail az i-Cell Kft. rendszeréből lett kiküldve.<br>
A rendszerben lévő adatokat bizalmasan kezeljük, harmadik fél számára nem adjuk ki.
</td>
<td> </td>
</tr>
<tr>
<td height="55"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
So I've managed to solve this. Thing what finally worked is:
add_filter( 'wp_mail_content_type', function () { return 'text/html'; } );
try { wp_mail($to, $subject, $this->getResult()); }
catch (Exception $e) { $result = false; }
You need to remove following lines as remove filter also gets registered on the go.
remove_filter( 'wp_mail_content_type', 'set_html_content_type' );
Related
I am trying to make the following page responsive. But when I hit 550px width I got the following result. If I go further down the resolution all my stuff will be slanted to the left except for the footer. I am a beginner trying to learn responsive design. I really appreciate all the help I can get. If you can provide a bit of explanation it will be great. All help is deeply appreciated. Thank you in advance.
https://jsfiddle.net/hansheung/Lhyk3s86/1/
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
<title>Benefits</title>
<style type="text/css">
body {
width: 100%;
background-color: #ffffff;
margin: 0;
padding: 0;
font-family: 'Open Sans'
}
p,
h1,
h2,
h3,
h4 {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
html {
width: 100%;
}
table {
font-size: 14px;
border: 0;
}
/* ----------- responsivity ----------- */
#media only screen and (max-width: 640px) {
/*------ top header ------ */
.main-header {
font-size: 20px !important;
}
.main-section-header {
font-size: 28px !important;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.align-center {
text-align: center !important;
padding-top: 20px;
}
.align-left {
text-align: left !important;
padding-bottom: 20px;
}
.no-bg {
background: none !important;
}
/*----- main image -------*/
.main-image img {
width: 640px !important;
height: auto !important;
}
/*-------- container --------*/
.container600 {
width: 460px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 640px !important;
height: auto !important;
} */
}
#media only screen and (max-width: 600px) {
/*------ top header ------ */
.main-header {
font-size: 18px !important;
}
.main-section-header {
font-size: 26px !important;
}
/*-------- container --------*/
.container600 {
width: 400px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 600px !important;
height: auto !important;
} */
}
.responsive{
width: 100%;
height: auto;
}
#font-face {
font-family: Kollektif Regular;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif.woff);
}
#font-face {
font-family: Kollektif Bold;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Bold.woff);
}
#font-face {
font-family: Kollektif Italic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Italic.woff);
}
#font-face {
font-family: Kollektik BoldItalic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-BoldItalic.woff);
}
.text{
color: #2d2a26;
font-size: 16px;
line-height: 28px;
text-align: justify;
}
.singleLine{
line-height:16px;
}
.doubleLine{
line-height:40px;
}
.subtitle{
font-size: 20px;
color:#FF7F30;
}
.text-color{
color: #ffffff;
font-size: 14px;
line-height: 23px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- header -->
<table width="100%" bgcolor="ffffff">
<tr>
<td >
<table align="center" width="600" class="container600">
<tr>
<td height="10" > </td>
</tr>
<tr>
<td>
<table border="0" align="center" width="600" class="container600">
<tr>
<td class="section-img">
<a href="http://www.talent-trust.com" ><img src="http://www.talent-trust.com/documents/img/j19-ttc_header.png" width="640"/></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end header -->
<!-- big banner section -->
<table width="100%" >
<tr>
<td align="center" valign="top" style="background:#ffffff url(http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:150px;padding-bottom:150px">
<table align="center">
<tr>
<td valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--end banner-->
<table border="0" align="center" width="70%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td style="line-height: 50px;"> </td>
</tr>
<tr>
<td align="justified" style="color: #053D56; font-size: 40px; font-family: Kollektif; line-height: 28px;">
<p>Member Benefits</p>
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td class="text">
At TTc, we aim to give missionaries the security, physical health, mental health, and wellness support and resources that they need to excel in their calling and stay in the field longer.
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td align="center">
<table border="0" width="70%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<td height="2" style="font-size: 2px; line-height: 2px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 Column Blog Layout-->
<table width="100%">
<tr>
<td align="center">
<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td>
<table width="50%" align="left" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div>
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Keeping your costs down</p>
<br>
<p class="text">We know cost is a big deal, so we provide multiple ways to keep costs down:</p>
<br>
<p class="text">
No Claims Bonus – We reward our members for staying healthy, which helps us to keep our premiums down. See how you can save up to 50% of your premium. <a href="http://www.talent-trust.com/benefits/ncb.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
<table width="50%" align="right" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div >
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Tailored Services help you THRIVE Long-Term</p>
<br>
<p class="text">We look at what services and technology we can offer that will help our members to stay in the field longer.</p>
<br>
<p class="text">
vHealth – a 24/7 service that connects you to a European based family doctor from anywhere in the world for free. Using an app on your phone, you can video call or have a vHealth doctor visit whenever and wherever you need it. <a href="http://www.talent-trust.com/benefits/vhealth.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" style="font-size: 50px; line-height: 50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end section -->
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td height="50" style="font-size: 30px; line-height: 30px;"> </td>
</tr>
</table>
<!-- end section -->
<!-- contact section -->
<table width="100%" bgcolor="#053D66">
<tr>
<td height="40" style="font-size: 40px; line-height: 40px;"> </td>
</tr>
<tr>
<td >
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<!-- <td height="2" style="font-size: 2px; line-height: 2px;"> </td> -->
</tr>
</table>
</td>
</tr>
<tr>
<td >
<table align="center" width="700" class="container600">
<tr>
<td>
<table width="300" align="left" cellpadding="0" cellspacing="0" class="container600">
<tr>
<!-- logo -->
<td align="right" class="align-center">
<a href="http://www.talent-trust.com" ><img width="200" border="0" style="display: block; width: 200px;" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="" /></a>
</td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td style="text-align:right;" class="align-left"><img width="24" height="24" src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" ></td>
</tr>
</table>
<table width="2" align="left" cellpadding="20" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td class="hide" width="2" height="25"></td>
</tr>
</table>
<table width="250" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td align="left">
<div class="text-color">
Email us: abc#hotmail.com
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px; color: #ffffff;">Tel: +604-899-8945</td>
</tr>
<tr>
<td height="33" style="font-size: 33px; line-height: 33px;"></td>
</tr>
<tr>
<td>
<table align="left" cellpadding="0" cellspacing="0">
<tr>
<td class="text-left p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" ></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="60"> </td>
</tr>
</table>
<!-- end section -->
I would like to know if there exists a technique to make the text set at the same line or at the same level because what I did is to add a line-height for my two first blocks but if I add a line-height for the others there is still a difference. It creates a weird look because my titles are not the same in each cell.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 120</td>
</tr>
</table>
</td>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">CONTACTS : 16 700</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000 </td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 6 700</td>
</tr>
<tr class="cat1" style="display:none">
<td>% contacts IT: 21%</td>
</tr>
</table>
</td>
<td>
<p>EMAIL NOMINATIFS: 16 700</p>
</td>
<td>
<p>OPT OUT: 3%</p>
</td>
<td>
<p>LIGNES DIRECTES: 35%</p>
</td>
</tr>
</tbody>
</table>
All you need is vertical-align:baseline on the table cells. td elements have vertical-align:middle by default.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
vertical-align:baseline;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 120</td>
</tr>
</table>
</td>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">CONTACTS : 16 700</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000 </td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 6 700</td>
</tr>
<tr class="cat1" style="display:none">
<td>% contacts IT: 21%</td>
</tr>
</table>
</td>
<td>
<p>EMAIL NOMINATIFS: 16 700</p>
</td>
<td>
<p>OPT OUT: 3%</p>
</td>
<td>
<p>LIGNES DIRECTES: 35%</p>
</td>
</tr>
</tbody>
</table>
How can I point the arrow the 'here' row?
I have try putting it in a td tag but makes the row bigger.
https://jsfiddle.net/6vx6033y/
<table cellpadding="4" cellspacing="0" border="0" align="center">
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">-$15.00</td>
</tr>
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">here</td>
</tr>
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">$15.00 </td>
</tr>
<div class="arrow">↙</div>
</table>
you can also use a pseudo element: https://jsfiddle.net/6vx6033y/1/
tr.arrow:after {
content:' \2199';
position:absolute;
font-size:1.5em;
color:red
}
td {
border:solid;
}
<table cellpadding="4" cellspacing="0" border="0" align="center">
<tr>
<td style=" text-align: right;">test</td>
<td style=" text-align: left;">-$15.00</td>
</tr>
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">$0.00</td>
</tr>
<tr class="arrow">
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">$15.00 </td>
</tr>
<tr>
<td style=" text-align: right;">tset:</td>
<td style="text-align: left;">$0.00</td>
</tr>
</table>
<td style=" text-align: left;">$15.00 <span class="arrow">↙</span></td>
https://jsfiddle.net/eceen7z4/
you can play with nth-child properties, like that:
.arrow2 TR:nth-child(2) TD:nth-child(2):after {
color: red;
content: "↙";
}
<table class="arrow2">
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">-$15.00</td>
</tr>
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">here</td>
</tr>
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">$15.00 </td>
</tr>
</table>
I've got a Table with % width and tds with % width. Also table-layout: fixed.
I want the tds height to be 1:1 ratio to %-width.
I can't use td:before {content: ""; display: block; margin-top: 100%;} because that would throw off the positioning of td content and I can't edit the html. So i used it in tr, which leads to the actual problem of the :before being displayed as table cell.
Any ideas on how to fix that or other ways to get the 1:1 ratio?
Here is a fiddle: jsfiddle
And here the internal code snippet, didn't find where to enable SCSS.
table {
width: 100%;
line-height: 31px;
table-layout: fixed;
thead tr: last-child th {
background: blue;
color: white;
&: first-child {
border-top-left-radius: 4px;
}
&:last-child {
border-top-right-radius: 4px;
}
}
tbody {
text-align: center;
td {
width: 14.2857142857%;
position: relative;
box-shadow: inset 1px -1px 0px 0px gray;
&: last-child {
box-shadow: inset 1px -1px 0px 0px gray, inset -1px 0px 0px 0px gray;
}
& .header {
position: absolute;
top: 0.2vw;
left: 0.2vw;
line-height: 11px;
padding: 8px;
font-size: 12px;
}
& .event {
background: blue;
border-radius: 4px;
margin: 35px 4px 4px 4px;
& ~ .event {
margin: 4px;
}
& a:link,
& a:visited,
& a:hover,
& a:active {
color: white;
}
& a:hover {
text-decoration: underline;
}
}
}
.today .header {
color: white;
background: blue;
}
tr {
&: nth-child(odd) .days: nth-child(odd) {
background: gray;
}
&:nth-child(even) .days:nth-child(even) {
background: gray;
}
&:before {
content: "";
display: block;
margin-top: 100%;
}
}
}
}
<table class="calendar">
<thead>
<tr>
<th colspan="2" class="head previous"> </th>
<th colspan="3" class="head current">October 2014</th>
<th colspan="2" class="head next"> </th>
</tr>
<tr>
<th class="label col_first">Mon<span>day</span>
</th>
<th class="label">Tue<span>sday</span>
</th>
<th class="label">Wed<span>nesday</span>
</th>
<th class="label">Thu<span>rsday</span>
</th>
<th class="label">Fri<span>day</span>
</th>
<th class="label weekend">Sat<span>urday</span>
</th>
<th class="label col_last weekend">Sun<span>day</span>
</th>
</tr>
</thead>
<tbody>
<tr class="week_0 first">
<td class="days empty col_first">
<div class="header"> </div>
</td>
<td class="days empty">
<div class="header"> </div>
</td>
<td class="days">
<div class="header">1</div>
</td>
<td class="days">
<div class="header">2</div>
</td>
<td class="days">
<div class="header">3</div>
</td>
<td class="days weekend">
<div class="header">4</div>
</td>
<td class="days weekend col_last">
<div class="header">5</div>
</td>
</tr>
<tr class="week_1">
<td class="days col_first">
<div class="header">6</div>
</td>
<td class="days">
<div class="header">7</div>
</td>
<td class="days">
<div class="header">8</div>
</td>
<td class="days">
<div class="header">9</div>
</td>
<td class="days today">
<div class="header">10</div>
</td>
<td class="days weekend">
<div class="header">11</div>
</td>
<td class="days active weekend col_last">
<div class="header">12</div>
<div class="event cal_1 upcoming"> Rauchen
</div>
<div class="event cal_1 upcoming"> Toilette
</div>
<div class="event cal_1 upcoming"> Spülen
</div>
<div class="event cal_1 upcoming"> Essen
</div>
<div class="event cal_1 upcoming"> Schlafen
</div>
</td>
</tr>
<tr class="week_2">
<td class="days col_first">
<div class="header">13</div>
</td>
<td class="days">
<div class="header">14</div>
</td>
<td class="days">
<div class="header">15</div>
</td>
<td class="days">
<div class="header">16</div>
</td>
<td class="days">
<div class="header">17</div>
</td>
<td class="days weekend">
<div class="header">18</div>
</td>
<td class="days weekend col_last">
<div class="header">19</div>
</td>
</tr>
<tr class="week_3">
<td class="days col_first">
<div class="header">20</div>
</td>
<td class="days">
<div class="header">21</div>
</td>
<td class="days">
<div class="header">22</div>
</td>
<td class="days">
<div class="header">23</div>
</td>
<td class="days">
<div class="header">24</div>
</td>
<td class="days weekend">
<div class="header">25</div>
</td>
<td class="days weekend col_last">
<div class="header">26</div>
</td>
</tr>
<tr class="week_4 last">
<td class="days col_first">
<div class="header">27</div>
</td>
<td class="days">
<div class="header">28</div>
</td>
<td class="days">
<div class="header">29</div>
</td>
<td class="days">
<div class="header">30</div>
</td>
<td class="days">
<div class="header">31</div>
</td>
<td class="days empty weekend">
<div class="header"> </div>
</td>
<td class="days empty weekend col_last">
<div class="header"> </div>
</td>
</tr>
</tbody>
</table>
Ok I did it like this now:jsfiddle
Put the before in the td and just gave the first .event -80% margin top.
& .event {
margin: -80% 4px 4px 4px;
td:before {
content: "";
display: block;
margin-top: 100%;
}
I have written an application from which you can write checks and I have the following markup on one of the pages to view and edit some of the fields of the check.
#CheckInformation {
border: 1px solid #aaa;
padding: 10px;
background-color: #E2F0F9;
margin-top: 15px;
}
#CheckInformation #PropertyAddress {
font-size: .87em;
width: 200px;
float: left;
text-align: center;
}
#CheckInformation .label-column {
width: 100px;
}
#CheckInformation .payto-col {
width: 570px;
}
#CheckInformation .line {
border-bottom: 1px solid #aaa;
}
#CheckInformation #PayTo {
width: 540px;
}
#CheckInformation #Address {
width: 200px;
height: 45px;
}
#CheckInformation #Memo {
width: 400px;
}
#CheckInformation #NumberWords {
margin: 3px;
font-style: italic;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" />
<div id="CheckInformation">
<table>
<tr>
<td class="top" colspan="2" rowspan="2">
<div id="PropertyAddress">
1234 Main St
<br />Some city, State 50000
</div>
</td>
<td class="text-right label-column">Date</td>
<td>
<input type="text"></input>
</td>
</tr>
<tr>
<td class="text-right">Check Number</td>
<td>
<input type="text"></input>
</td>
</tr>
<tr>
<td>Pay to</td>
<td class="payto-col line">
Some person
</td>
<td class="text-right">Amount</td>
<td class="text-right line">
70.00
</td>
</tr>
<tr>
<td></td>
<td class="line" colspan="3">
<div id="NumberWords">Zero Dollars & Zero Cents</div>
</td>
</tr>
<tr>
<td class="top">Address</td>
<td colspan="3">
<div id="Address">
1234 Main St
<br />Some city, State 50000
</div>
</td>
</tr>
<tr>
<td>Memo</td>
<td colspan="3">
<input type="text"></input>
</td>
</tr>
</table>
</div>
It is supposed to have a bottom border on the tds that displays who the check was written to and the amount but not on the labels for those cells. It actually sees to appear correctly in IE and FireFox but in Chrome, I get a bottom border under the Amount label as well.
Running IE 9, FireFox 6.0.2, and Chrome 16.0.912.63
Anyone else see the issue?
Adding table{border-collapse:separate} seems to fix it but I don't know why. I'll update the answer if I figure out more.