in desktop view I want to align the image column to the right and the text column to the left, but in mobile view the image should be on top
how can I reverse the order of the columns?
<row>
<columns small="12" large="6" class="text-container text-left small-text-center">
<h1 class="text-left">Title</h1>
<p>Copy</p>
<button href="zurb.com">Meer weten</button>
</columns>
<columns small="12" large="6" class="collapse visual-container">
<img src="assets/img/item-2.jpg" alt="" class="small-float-center float-right"/>
</columns>
</row>
Use the dir attribute.
<table class="row" dir="rtl">
<tr>
<td class="wrapper" dir="ltr">
<table class="four columns" >
<tr>
<td class="center" align="center">
<center>
<img class="center" src="http://placekitten.com/g/600/600"
width="128" height="154" alt="Majestic Kitty" />
</center>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last" dir="ltr">
<table class="eight columns">
<tr>
<td>
<p>Lorem ipsum dolor sit amet, beatae deserunt!</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
This shows the content left to right on desktop but the image on top on mobile.
Solution found here: http://zurb.com/university/lessons/get-your-responsive-emails-in-order
Related
I am currently writing an automation script, Where I read email Gmail through API and i am getting below html content. Now i need only code 191418 from this html content, I want to take it using regex. I tried with this
.*([0-9]{6})
To find 6 digit code but its returns 10 matchings, I am not good at regex, Can someone please help me to get the code using regex?
<div dir="ltr"><br><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr"><br></div><u></u>
<div>
<center id="m_-2051398760120817894wrapper">
<table id="m_-2051398760120817894main" width="100%">
<tbody><tr id="m_-2051398760120817894logo">
<td>
<table width="100%">
<tbody><tr>
<td>
<img src="test.com/logo.png" width="140px" alt="xxxxx Logo" style="padding:0 10px">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td height="18px"></td>
</tr>
<tr id="m_-2051398760120817894header">
<td>
<table width="100%">
<tbody><tr>
<td height="64px" style="background-color:#10069f;color:#fff;padding-left:24px;font-weight:700">Reset your password</td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="m_-2051398760120817894content">
<td>
<table width="100%">
<tbody><tr>
<td style="background-color:#f6f5ff;padding:24px 24px 16px 24px">
<p style="margin-top:0">The following is the verification code required to complete your password reset.</p>
<p style="margin-bottom:24px">Enter the following verification code on the screen during the registration, and proceed to the next step.</p>
<div style="display:block;text-align:center;margin-bottom:8px;background-color:#fff;height:92px;font-weight:600;font-size:36px;line-height:92px">191418</div>
<span style="display:block;font-size:12px;color:#5d5d5d">*The verification code is valid only for 24 hours.</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td height="24px"></td>
</tr>
<tr id="m_-2051398760120817894footer">
<td>
<table width="100%">
<tbody><tr>
<td style="background-color:#6d7777;padding:16px 24px;font-size:12px;color:#fff">
<table width="100%">
<tbody><tr>
<td id="m_-2051398760120817894footer-left">
<span style="display:block">amnimo Inc.</span>
<span style="display:block">0-3-30 usaa-fso, xxxxxxxx-shi, Tokyo, 180-8750, Japan</span>
<span style="display:block">Phone: +81-422-52-6779</span>
<span id="m_-2051398760120817894copyright-mb" style="margin-top:16px">© 2020 <div dir="ltr"><br><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr"><br></div><u></u>
<div>
<center id="m_-2051398760120817894wrapper">
<table id="m_-2051398760120817894main" width="100%">
<tbody><tr id="m_-2051398760120817894logo">
<td>
<table width="100%">
<tbody><tr>
<td>
<img src="https://test.com/logo.png" width="140px" alt="Amnimo Logo" style="padding:0 10px">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td height="18px"></td>
</tr>
<tr id="m_-2051398760120817894header">
<td>
<table width="100%">
<tbody><tr>
<td height="64px" style="background-color:#10069f;color:#fff;padding-left:24px;font-weight:700">Reset your password</td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="m_-2051398760120817894content">
<td>
<table width="100%">
<tbody><tr>
<td style="background-color:#f6f5ff;padding:24px 24px 16px 24px">
<p style="margin-top:0">The following is the verification code required to complete your password reset.</p>
<p style="margin-bottom:24px">Enter the following verification code on the screen during the registration, and proceed to the next step.</p>
<div style="display:block;text-align:center;margin-bottom:8px;background-color:#fff;height:92px;font-weight:600;font-size:36px;line-height:92px">191418</div>
<span style="display:block;font-size:12px;color:#5d5d5d">*The verification code is valid only for 24 hours.</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td height="24px"></td>
</tr>
<tr id="m_-2051398760120817894footer">
<td>
<table width="100%">
<tbody><tr>
<td style="background-color:#6d7777;padding:16px 24px;font-size:12px;color:#fff">
<table width="100%">
<tbody><tr>
<td id="m_-2051398760120817894footer-left">
<span style="display:block">test Inc.</span>
<span style="display:block">2-9-32 ssdsa-sss, puakano-shi, Tokyo, 000-8000, Japan</span>
<span style="display:block">Phone: +81-000-00-652</span>
<span id="m_-2051398760120817894copyright-mb" style="margin-top:16px">© 2020 amnimo Inc.</span>
</td>
<td id="m_-2051398760120817894footer-right">
<span style="display:block">© 2020 amnimo Inc.</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</center>
</div>
</div></div> Inc.</span>
</td>
<td id="m_-2051398760120817894footer-right">
<span style="display:block">© 2020 test Inc.</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</center>
</div>
</div></div>
You should use some DOM library that will let you query the element you want and get its content. Parsing HTML with regex is bad idea.
If you must do it, getting six numbers is not enough - after inspecting, I see that it's div content. So I would write something among the lines:
<div[^>]*>\d{6}<\/div>
Pattern explanation:
<div - match <div literally
[^>]* - match zero or more characters other from >
> - match > literally
\d{6} - match 6 digits
<\/div> - match <\/div> literally
Regex demo
EDIT
In order to extract desired text, use capturing groups:
<div[^>]*>(\d{6})<\/div>
Then text in first capturing group will be your desired result.
Maybe try word boundaries, which will prevent matching inside longer numbers:
\b([0-9]{6})\b
https://regex101.com/r/dQAiHU/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="application/ld+json">
[{
"#context": "http://schema.org/",
"#type": "Organization",
"logo": "https://www.gstatic.com/images/branding/product/1x/googleg_48dp.png"
},{
"#context": "http://schema.org/",
"#type": "EmailMessage",
"subjectLine": "[Important] Please add subject line in annotation"
},{
"#context": "http://schema.org/",
"#type": "DiscountOffer",
"description": "20% off",
"discountCode": "PROMO",
"availabilityStarts": "2021-04-07T09:19:24-07:00",
"availabilityEnds": "2021-04-10T09:19:24-07:00"
},{
"#context": "http://schema.org/",
"#type": "PromotionCard",
"image": "https://www.google.com/gmail-for-marketers/promo-tab/markup-tool/sample.png"
}]
</script>
</head>
<body style="margin: 0px; padding: 0px; min-width: 100%; background-color: rgb(243, 242, 240); cursor: auto;">
<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#f3f2f0;">
<table bgcolor="#f3f2f0;" border="0" cellpadding="0" cellspacing="0" style="background-color:#f3f2f0;" width="100%">
<tbody>
<tr>
<td width="100%">
<div class="webkit" style="max-width:600px;Margin:0 auto;"><!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]--><!-- ======= start main body ======= -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="outer" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tbody>
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"><!-- ======= start header ======= -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tbody>
<tr>
<td align="center">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="Margin: 0 auto;" width="100%">
<tbody>
<tr>
<td bgcolor="#FFFFFF" class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"><!-- ======= start header ======= -->
<table bgcolor="#f3f2f0" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="two-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:left;font-size:0;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0" >
<tr>
<td width="20%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:30px;" >
<![endif]-->
<div class="column" style="width:100%;max-width:80px;display:inline-block;vertical-align:top;">
<table class="contents" style="border-spacing:0; width:100%">
<tbody>
<tr>
<td align="left" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:5px;"><img align="left" alt="" height="60" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/dbe9c57f-5e00-4d9f-9719-5d36a9a02ebc.jpg" style="border-width:0; max-width:60px;height:auto; display:block" width="60" /></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="80%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:518px;display:inline-block;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" style="border-spacing:0" width="100%">
<tbody>
<tr>
<td class="inner" style="padding-top:0px;padding-bottom:10px; padding-right:10px;padding-left:10px;">
<table border="0" cellpadding="0" cellspacing="0" class="contents" style="border-spacing:0; width:100%">
<tbody>
<tr>
<td align="left" valign="top"></td>
</tr>
<tr>
<td align="right" valign="top"><img alt="" height="16" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/c01afe22-e370-4df3-b96e-927714713f51.jpg" style="border-width:0; max-width:20px;height:auto; max-height:16px; padding-top:0px; padding-left:10px" width="20" /><font style="font-size:11px; text-decoration:none; color:#474b53; font-family: Verdana, Geneva, sans-serif; text-align:left; line-height:16px; padding-bottom:30px">View as a web page</font></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- ======= end header ======= --><!-- ======= start two column ======= -->
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style=" border-left:1px solid #e8e7e5; border-right:1px solid #e8e7e5" width="100%">
<tbody>
<tr>
<td align="center" background="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/595fac04-56a2-46f4-982e-69600273e5d0.jpg" bgcolor="#1f3ca6" class="two-column" height="260" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:center;font-size:0" valign="top" width="600"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:260px;">
<v:fill type="tile" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/595fac04-56a2-46f4-982e-69600273e5d0.jpg" color="#1f3ca6" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div><!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0" >
<tr>
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:299px;display:inline-block;vertical-align:top;">
<table style="border-spacing:0" width="100%">
<tbody>
<tr>
<td class="inner" style="padding-top:20px;padding-bottom:10px; padding-right:10px;padding-left:30px;">
<table class="contents1" style="border-spacing:0; width:100%">
<tbody>
<tr>
<td align="center" style="padding-top:20px; padding-right:30px" valign="middle">
<p style="font-size:30px; text-decoration:none; color:#ffffff; font-family: Verdana, Geneva, sans-serif; text-align:left"><strong>Lorem Ipsum</strong></p>
<p style="font-size:14px; text-decoration:none; color:#ffffff; font-family: Verdana, Geneva, sans-serif; text-align:left; line-height:18px">Consectetur hi $name$ elitsed do eiusmod tempor sitabore et dolore magna aliqua.<br />
<br />
<strong>Read more »</strong></p>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="Margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="Margin:0 auto;">
<tbody>
<tr>
<td align="center" bgcolor="#ffffff" height="40" style="-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;" width="120"><a class="button_link" href="#" style="width:120; display:block; text-decoration:none; border:0; text-align:center; font-weight:bold;font-size:13px; font-family: Arial, sans-serif; color: #1f3ca6">Read more » </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:299px;display:inline-block;vertical-align:top;">
<table style="border-spacing:0" width="100%">
<tbody>
<tr>
<td align="right" style="padding-top:20px;padding-bottom:0;padding-right:0;padding-left:0;"><img alt="" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/fc68f7b7-efa6-45db-8b6f-ac6f78ae6782.png" style="border-width:0;width:100%; height:auto;" width="290" /></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</tbody>
</table>
<!-- ======= end two column ======= --><!-- ======= start two column ======= -->
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="two-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:center;font-size:0;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0" >
<tr>
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:top;">
<table bgcolor="#FFFFFF" class="contents" style="border-spacing:0; width:100%">
<tbody>
<tr>
<td align="left"><img alt="" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/c11788a0-0366-43bd-812f-4756c82a6f93.jpg" style="border-width:0;width:100%; height:auto;display:block" width="300" /></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:top;">
<table style="border-spacing:0" width="100%">
<tbody>
<tr>
<td class="inner" style="padding-top:0px;padding-bottom:10px; padding-right:20px;padding-left:30px;">
<table class="contents" style="border-spacing:0; width:100%">
<tbody>
<tr>
<td align="center" style="padding-top:20px; padding-right:30px" valign="middle">
<p style="font-size:20px; text-decoration:none; color:#262626; font-family: Verdana, Geneva, sans-serif; text-align:left"><strong>lorem ipsum</strong></p>
<p style="font-size:14px; text-decoration:none; color:#3a3d41; font-family: Verdana, Geneva, sans-serif; text-align:left; line-height:18px">Lorem ipsum dolor lorem cupidat non proident, sunt in culpa qui officia deserunt mollit telaborum.<br />
</p>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="Margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="Margin:0 auto;">
<tbody>
<tr>
<td align="center" bgcolor="#1f3ca6" height="40" style="-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;" width="120"><a class="button_link" href="#" style="width:120; display:block; text-decoration:none; border:0; text-align:center; font-weight:bold;font-size:13px; font-family: Arial, sans-serif; color: #ffffff">Read more » </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-size:14px; text-decoration:none; color:#3a3d41; font-family: Verdana, Geneva, sans-serif; text-align:left; line-height:18px"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!-- ======= end two column ======= --><!-- ======= start two column ======= -->
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="two-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:center;font-size:0;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0" >
<tr>
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:299px;display:inline-block;vertical-align:top;">
<table style="border-spacing:0" width="100%">
<tbody>
<tr>
<td class="inner" style="padding-top:0px;padding-bottom:10px; padding-right:20px;padding-left:30px;">
<table class="contents1" style="border-spacing:0; width:100%">
<tbody>
<tr>
<td align="center" style="padding-top:20px; padding-right:30px" valign="middle">
<p style="font-size:20px; text-decoration:none; color:#262626; font-family: Verdana, Geneva, sans-serif; text-align:left"><strong>lorem ipsum</strong></p>
<p style="font-size:14px; text-decoration:none; color:#3a3d41; font-family: Verdana, Geneva, sans-serif; text-align:left; line-height:18px">Lorem ipsum dolor lorem cupidat non proident, sunt in culpa qui officia deserunt mollit telaborum.<br />
</p>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="Margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="Margin:0 auto;">
<tbody>
<tr>
<td align="center" bgcolor="#1f3ca6" height="40" style="-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;" width="120"><a class="button_link" href="#" style="width:120; display:block; text-decoration:none; border:0; text-align:center; font-weight:bold;font-size:13px; font-family: Arial, sans-serif; color: #ffffff">Read more » </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="font-size:14px; text-decoration:none; color:#3a3d41; font-family: Verdana, Geneva, sans-serif; text-align:left; line-height:18px"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:top;">
<table bgcolor="#FFFFFF" class="contents" style="border-spacing:0; width:100%">
<tbody>
<tr>
<td align="left" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"><img alt="" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/4dccd1e6-3ce2-4fd9-9b94-635e70bb09e2.jpg" style="border-width:0;width:100%; height:auto; display:block" width="300" /></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!-- ======= end two column ======= --><!-- ======= start two column ======= -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" background="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/595fac04-56a2-46f4-982e-69600273e5d0.jpg" bgcolor="#1f3ca6" class="two-column" height="200" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:center;font-size:0" valign="top" width="600"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200px;">
<v:fill type="tile" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/595fac04-56a2-46f4-982e-69600273e5d0.jpg" color="#1f3ca6" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div><!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0" >
<tr>
<td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:299px;display:inline-block;vertical-align:top;">
<table style="border-spacing:0" width="100%">
<tbody>
<tr>
<td class="inner" style="padding-top:20px;padding-bottom:10px; padding-right:10px;padding-left:30px;">
<table class="contents1" style="border-spacing:0; width:100%">
<tbody>
<tr>
<td align="center" style="padding-top:20px; padding-right:30px" valign="middle">
<p style="color:#ffffff; font-size:25px; text-align:center; font-family: Verdana, Geneva, sans-serif; line-height:22px ; text-transform:uppercase">lorem ipsum</p>
<p style="color:#ffffff; font-size:60px; text-align:center; font-family: Verdana, Geneva, sans-serif">40%</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:299px;display:inline-block;vertical-align:top;">
<table style="border-spacing:0" width="100%">
<tbody>
<tr>
<td align="right" style="padding-top:20px;padding-bottom:0;padding-right:0;padding-left:0;"><img alt="" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/934e8df4-ef47-4dc5-b8e3-a1ccab54963d.png" style="border-width:0;width:100%; height:auto;" width="282" /></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</tbody>
</table>
<!-- ======= end two column ======= --><!-- ======= start footer ======= -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td height="30"></td>
</tr>
<tr>
<td class="two-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:center;font-size:0;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" style="border-spacing:0" >
<tr>
<td width="60%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<div class="column" style="width:100%;max-width:350px;display:inline-block;vertical-align:top;">
<table class="contents" style="border-spacing:0; width:100%">
<tbody>
<tr>
<td align="right" style="padding-top:0;padding-bottom:0;padding-right:10px;padding-left:0;" width="39%"><img alt="" height="59" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/13f425ab-c680-4ae0-88de-7b493d95095f.jpg" style="border-width:0; max-width:59px;height:auto; display:block; padding-right:20px" width="59" /></td>
<td align="left" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" valign="middle" width="61%">
<p style="color:#787777; font-size:13px; text-align:left; font-family: Verdana, Geneva, sans-serif">Lorem ipsum © 2017<br />
lorem ipsum lorem ipsum<br />
lorem ipsum lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="40%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" > <![endif]-->
<div class="column" style="width:100%;max-width:248px;display:inline-block;vertical-align:top;">
<table style="border-spacing:0" width="100%">
<tbody>
<tr>
<td class="inner" style="padding-top:0px;padding-bottom:10px; padding-right:10px;padding-left:10px;">
<table class="contents" style="border-spacing:0; width:100%">
<tbody>
<tr>
<td align="center" style="padding-top:10px" valign="top" width="32%">
<table border="0" cellpadding="0" cellspacing="0" width="150">
<tbody>
<tr>
<td align="center" width="33"><img alt="facebook" border="0" height="36" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/1f9161ee-46b5-4bdf-86db-9e32d4b98336.jpg" style="border-width:0; max-width:36px;height:auto; display:block; max-height:36px" width="36" /></td>
<td align="center" width="34"><img alt="twitter" border="0" height="36" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/4e449140-ec71-4978-97bf-8e0f15b5ff23.jpg" style="border-width:0; max-width:36px;height:auto; display:block; max-height:36px" width="36" /></td>
<td align="center" width="33"><img alt="linkedin" border="0" height="36" src="https://gallery.mailchimp.com/fdcaf86ecc5056741eb5cbc18/images/d21cca91-335e-4fa4-9313-b0ea37e0452b.jpg" style="border-width:0; max-width:36px;height:auto; display:block; max-height:36px" width="36" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--></td>
</tr>
<tr>
<td height="30" style="text-align: center;"><span style="font-size:20px;"><span style="color: rgb(39, 65, 107); font-family: engagefont, "Helvetica Neue", "Calibri Light", Roboto, sans-serif, "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "Malgun Gothic"; background-color: rgb(255, 255, 255);">$unsub$</span></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="outer" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tbody>
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"><span style="font-size:20px;"><!-- ======= end footer ======= --></span></td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></div>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
I am working for an emailing platform and I've been asked by a customer if we enabled Google Promotab in email designs.
I have read the documentation, tried to do a test yet I couldn't manage to display the promotion. My Gmail account is not ending with "promotabtesting#gmail" but it is configured as expected on troubleshooting section.
Are there any pre-requisits as a sender to enable the promotab feature?
I ask for both our clients (Brands) and my company that doesn't figure on "they support promotab" here : https://developers.google.com/gmail/promotab/overview but could be very soon.
Thanks a lot for your help
Max
Project Manager
I apologize for all of the code, but I couldn't eliminate any more without muddling the clarity of the question.
Suppose I have this XML:
<Dataset>
<Rec RN="FOO">
<Fld FN="ID">ID_1</Fld>
<Fld FN="OPT">0</Fld>
<Fld FN="DESCRIPTION">DESCRIPTION_1</Fld>
</Rec>
<Rec RN="BAR" RC="3">
<Fld FN="ID">ID_2</Fld>
<Fld FN="TYPE">TYPE_1</Fld>
</Rec>
<Rec RN="BAR">
<Fld FN="ID">ID_3</Fld>
<Fld FN="TYPE">TYPE_2</Fld>
</Rec>
<Rec RN="FOO">
<Fld FN="ID">ID_4</Fld>
<Fld FN="OPT">1</Fld>
<Fld FN="DESCRIPTION">DESCRIPTION_2</Fld>
</Rec>
<Rec RN="BAR" RC="3">
<Fld FN="ID">ID_5</Fld>
<Fld FN="TYPE">TYPE_4</Fld>
</Rec>
<Rec RN="BAR">
<Fld FN="ID">ID_6</Fld>
<Fld FN="TYPE">TYPE_5</Fld>
</Rec>
<Rec RN="SPAM">
<Fld FN="CLASS">CLASS_1</Fld>
</Rec>
</Dataset>
And the following XSLT:
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="Dataset">
<html>
<head>
<link rel="stylesheet" type="text/css" href="On-line Styles.css"/>
</head>
<body>
<p class="subheading">
Commands
</p>
<p>
<xsl:choose>
<xsl:when test="Rec[#RN='FOO']">
<xsl:apply-templates select="Rec[#RN='FOO']"/>
</xsl:when>
<xsl:otherwise>
None
</xsl:otherwise>
</xsl:choose>
</p>
</body>
</html>
</xsl:template>
<xsl:template match="Rec[#RN='FOO']">
<xsl:for-each select=".">
<xsl:value-of select="Fld[#FN='ID']"/>
<xsl:if test="Fld[#FN='OPT'] = 1">
(Optional)
</xsl:if>
-
<xsl:value-of select="Fld[#FN='DESCRIPTION']"/>
<p>
<xsl:choose>
<xsl:when test="../Rec[#RN='FOO']">
<table style="border-collapse: separate;" cellspacing="4" border="2"
bordercolorlight="#c0c0c0" bordercolordark="#c0c0c0">
<tr bgcolor="#C0C0C0">
<td style="width: 35%; padding: 6px;" valign="top">
<p class="Tableheader" style="margin-bottom: 0;">
<span style="font-weight: bold;">ID</span>
</p>
</td>
<td style="width: 45%; padding: 6px;" valign="top">
<p class="Tableheader" style="margin-bottom: 0;">
<span style="font-weight: bold;">TYPE</span>
</p>
</td>
</tr>
<xsl:for-each select="../Rec[#RN='BAR']">
<xsl:if test="preceding-sibling::Rec/#RN='FOO'">
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">
<xsl:choose>
<xsl:when test="Fld[#FN='ID']">
<xsl:value-of select="Fld[#FN='ID']"/>
</xsl:when>
<xsl:otherwise>
<td> </td>
</xsl:otherwise>
</xsl:choose>
</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">
<xsl:choose>
<xsl:when test="Fld[#FN='TYPE']">
<xsl:value-of select="Fld[#FN='TYPE']"/>
</xsl:when>
<xsl:otherwise>
<td> </td>
</xsl:otherwise>
</xsl:choose>
</p>
</td>
</tr>
</xsl:if>
</xsl:for-each>
</table>
</xsl:when>
</xsl:choose>
</p>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
I get the following output for the tables:
Table 1
<table style="border-collapse: separate;" cellspacing="4" border="2" bordercolorlight="#c0c0c0" bordercolordark="#c0c0c0">
<tr bgcolor="#C0C0C0">
<td style="width: 35%; padding: 6px;" valign="top">
<p class="Tableheader" style="margin-bottom: 0;">
<span style="font-weight: bold;">ID</span>
</p>
</td>
<td style="width: 45%; padding: 6px;" valign="top">
<p class="Tableheader" style="margin-bottom: 0;">
<span style="font-weight: bold;">TYPE</span>
</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_2</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_1</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_3</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_2</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_5</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_4</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_6</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_5</p>
</td>
</tr>
</table>
Table 2
<table style="border-collapse: separate;" cellspacing="4" border="2" bordercolorlight="#c0c0c0" bordercolordark="#c0c0c0">
<tr bgcolor="#C0C0C0">
<td style="width: 35%; padding: 6px;" valign="top">
<p class="Tableheader" style="margin-bottom: 0;">
<span style="font-weight: bold;">ID</span>
</p>
</td>
<td style="width: 45%; padding: 6px;" valign="top">
<p class="Tableheader" style="margin-bottom: 0;">
<span style="font-weight: bold;">TYPE</span>
</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_2</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_1</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_3</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_2</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_5</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_4</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_6</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_5</p>
</td>
</tr>
</table>
What I need is for each table to only display the ID and TYPE text values for only the <Rec RN="BAR">s following the <Rec RN="FOO"> and before the next <Rec RN="FOO"> or <Rec> with another #RN value. There can be 1 to n number of <Rec RN="BAR"> following a <Rec RN="FOO">. The following example shows the output I need:
Table 1
<table style="border-collapse: separate;" cellspacing="4" border="2" bordercolorlight="#c0c0c0" bordercolordark="#c0c0c0">
<tr bgcolor="#C0C0C0">
<td style="width: 35%; padding: 6px;" valign="top">
<p class="Tableheader" style="margin-bottom: 0;">
<span style="font-weight: bold;">ID</span>
</p>
</td>
<td style="width: 45%; padding: 6px;" valign="top">
<p class="Tableheader" style="margin-bottom: 0;">
<span style="font-weight: bold;">TYPE</span>
</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_2</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_1</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_3</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_2</p>
</td>
</tr>
</table>
Table 2
<table style="border-collapse: separate;" cellspacing="4" border="2" bordercolorlight="#c0c0c0" bordercolordark="#c0c0c0">
<tr bgcolor="#C0C0C0">
<td style="width: 35%; padding: 6px;" valign="top">
<p class="Tableheader" style="margin-bottom: 0;">
<span style="font-weight: bold;">ID</span>
</p>
</td>
<td style="width: 45%; padding: 6px;" valign="top">
<p class="Tableheader" style="margin-bottom: 0;">
<span style="font-weight: bold;">TYPE</span>
</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_5</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_4</p>
</td>
</tr>
<tr>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">ID_6</p>
</td>
<td style="padding: 6px;" valign="top">
<p style="margin-bottom: 0;">TYPE_5</p>
</td>
</tr>
</table>
If I understand this correctly (which is not at all certain), you want to do something like this:
XSLT 1.0
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:key name="rows" match="Rec[#RN='BAR']" use="generate-id(preceding-sibling::Rec[#RN='FOO'][1])" />
<xsl:template match="/Dataset">
<html>
<body>
<xsl:apply-templates select="Rec[#RN='FOO']"/>
</body>
</html>
</xsl:template>
<xsl:template match="Rec[#RN='FOO']">
<table border="1">
<tr>
<th>ID</th>
<th>TYPE</th>
</tr>
<xsl:apply-templates select="key('rows', generate-id())"/>
</table>
<p/>
</xsl:template>
<xsl:template match="Rec[#RN='BAR']">
<tr>
<td>
<xsl:value-of select="Fld[#FN='ID']"/>
</td>
<td>
<xsl:value-of select="Fld[#FN='TYPE']"/>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
Applied to your example input, the result will be:
<html>
<body>
<table border="1">
<tr>
<th>ID</th>
<th>TYPE</th>
</tr>
<tr>
<td>ID_2</td>
<td>TYPE_1</td>
</tr>
<tr>
<td>ID_3</td>
<td>TYPE_2</td>
</tr>
</table>
<p></p>
<table border="1">
<tr>
<th>ID</th>
<th>TYPE</th>
</tr>
<tr>
<td>ID_5</td>
<td>TYPE_4</td>
</tr>
<tr>
<td>ID_6</td>
<td>TYPE_5</td>
</tr>
</table>
<p></p>
</body>
</html>
rendered as:
I have a dialog displayed having clicked on an element. In this dialog there are 2 tables (HTML). A table within a table.
Table 1 has the text "Match audit codes"
Table 2 has some rows and columns. Column 1 has a checkbox. Column 2 has a char value, e.g. the letter "I")
Column 3 has some text e.g. "Matched to full address"
I would like to locate the checkbox from column 1 which has the text description "Matched to Full Address" and the parent table has the text "Match audit codes"
I tried the following Xpath which locates the checkbox which has the text "Matched to full address"
//div[contains(text(), "Matched to full address")]/ancestor::tr[1]/td[1]//input
My Selenium Python script will not click this checkbox. The developer says there could be more than 1 "Matched to full address" in the HTML somewhere.
I need the Xpath to start from the parent table which has the text "Match audit codes" and then go down to the next table which has the text "Matched to full address" and then locate the checkbox.
How can i build the Xpath please?
The HTML is:
<table class="GJPPK2LBAL" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<div class="GJPPK2LBPK">Match audit codes</div>
</td>
<td align="left" style="vertical-align: top;">
<button class="gwt-Button GJPPK2LBLK" type="button">X</button>
</td>
</tr>
</tbody>
</table>
<table class="GJPPK2LBOK" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: middle;">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<tr>
<td align="left" style="vertical-align: top;">
<div style="overflow: auto; position: relative; width: 25em;">
<div style="position: relative;">
<table class="GJPPK2LBJE" cellspacing="0"
__gwtcellbasedwidgetimpldispatchingfocus="true"
__gwtcellbasedwidgetimpldispatchingblur="true">
<thead aria-hidden="false">
<colgroup>
<tbody>
<tr class="GJPPK2LBCD" __gwt_subrow="0" __gwt_row="0">
<td class="GJPPK2LBBD GJPPK2LBDD GJPPK2LBED">
<div __gwt_cell="cell-gwt-uid-5972" style="outline-style:none;">
<input type="checkbox" tabindex="-1"/>
</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDD">
<div __gwt_cell="cell-gwt-uid-5973" style="outline-style:none;">I</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDD GJPPK2LBOD">
<div __gwt_cell="cell-gwt-uid-5974" style="outline-style:none;">Matched to
full address
</div>
</td>
</tr>
<tr class="GJPPK2LBCE" __gwt_subrow="0" __gwt_row="1">
<td class="GJPPK2LBBD GJPPK2LBDE GJPPK2LBED">
<div __gwt_cell="cell-gwt-uid-5972" style="outline-style:none;">
<input type="checkbox" tabindex="-1"/>
</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDE">
<div __gwt_cell="cell-gwt-uid-5973" style="outline-style:none;">B</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDE GJPPK2LBOD">
<div __gwt_cell="cell-gwt-uid-5974" style="outline-style:none;">Matched to
building
</div>
</td>
</tr>
<tr class="GJPPK2LBCD" __gwt_subrow="0" __gwt_row="2">
<tr class="GJPPK2LBCE" __gwt_subrow="0" __gwt_row="3">
</tbody>
<tbody style="display: none;">
<tfoot style="display: none;" aria-hidden="true"/>
</table>
Thanks,
Riaz
I'm not sure if I'm getting your question. You want to locate the table containing "Match audit codes", then move on to the next table containing "Matched to full address", and inside that table search for the checkbox in the same row as the "Matched to full address" text?
If so, then it should look like this:
//table[.//div[text()='Match audit codes']]/following-sibling::table[.//div[.='Matched to full address']][1]//div[.='Matched to full address']/ancestor::tr[1]/td//input[#type='checkbox'][1]
If .='Matched to full address' doesn't work, try contains(.,'Matched to full address') instead.
Here is a tip:
Find all elements with text to be matched.
List<WebElement> texts = driver.findElements(By.xpath("//td[#class='GJPPK2LBBD GJPPK2LBDE GJPPK2LBOD']"));
Now store the indexes of elements which contains your desired text.
List<Integer> list = new ArrayList<>();
for(int i=0;i<list.size();i++){
if(text.get(i).getText().equals("Matched to full address"))
list.add(i);
}
Now you have the list of all indexes with text as 'Matched to full address'. You can now call the corresponding check boxes and play.
List<WebElement> checks = driver.findElements(By.xpath("//td[#class='GJPPK2LBBD GJPPK2LBDE GJPPK2LBED']"));
for(int index:checks){
WebElement cb = checks.get(index);
//Do something with cb
}
Hope it helps.
I have an HTML page with a table of checkboxes. Each checkbox has a name.
In col1 is the checkbox. In col2 is the name.
I want to find the checkbox which has the name "Address"
I have managed to find it by using the following Xpath:
//table[#id="reporting_add_report_tab_manual_ct_vars_usn"]/tbody//tr//td//div[contains(text(), "Address")]//ancestor::tr[1]//input[#type="checkbox"]
I locate the column which contains the text "Address"
I then use ancestor to go up 1 row to it's parent of the current node and locate the checkbox
I would like to use CSS, can this xpath be converted to use the CSS locator?
CSS is quicker than Xpath to locate elements on the web page.
The HTML is:
<table id="reporting_add_report_tab_manual_ct_vars_usn" class="GJPPK2LBJE" cellspacing="0" __gwtcellbasedwidgetimpldispatchingfocus="true" __gwtcellbasedwidgetimpldispatchingblur="true">
<thead aria-hidden="false">
<colgroup>
<tbody style="">
<tr class="GJPPK2LBCD GJPPK2LBJD" __gwt_subrow="0" __gwt_row="0">
<td class="GJPPK2LBBD GJPPK2LBDD GJPPK2LBED GJPPK2LBKD">
<div __gwt_cell="cell-gwt-uid-1204" style="outline-style:none;">
<input type="checkbox" tabindex="-1"/>
</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDD GJPPK2LBKD">
<div __gwt_cell="cell-gwt-uid-1205" style="outline-style:none;">Name</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDD GJPPK2LBKD">
<div __gwt_cell="cell-gwt-uid-1206" style="outline-style:none;">
<select tabindex="-1">
</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDD GJPPK2LBKD">
<td class="GJPPK2LBBD GJPPK2LBDD GJPPK2LBOD GJPPK2LBKD">
</tr>
<tr class="GJPPK2LBCE" __gwt_subrow="0" __gwt_row="1">
<td class="GJPPK2LBBD GJPPK2LBDE GJPPK2LBED">
<div __gwt_cell="cell-gwt-uid-1204" style="outline-style:none;">
<input type="checkbox" tabindex="-1"/>
</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDE">
<div __gwt_cell="cell-gwt-uid-1205" style="outline-style:none;">Address</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDE">
<td class="GJPPK2LBBD GJPPK2LBDE">
<td class="GJPPK2LBBD GJPPK2LBDE GJPPK2LBOD">
</tr>
<tr class="GJPPK2LBCD" __gwt_subrow="0" __gwt_row="2">
<td class="GJPPK2LBBD GJPPK2LBDD GJPPK2LBED">
<div __gwt_cell="cell-gwt-uid-1204" style="outline-style:none;">
<input type="checkbox" tabindex="-1"/>
</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDD">
<div __gwt_cell="cell-gwt-uid-1205" style="outline-style:none;">DOB</div>
</td>
<td class="GJPPK2LBBD GJPPK2LBDD">
<td class="GJPPK2LBBD GJPPK2LBDD">
<td class="GJPPK2LBBD GJPPK2LBDD GJPPK2LBOD">
</tr>
<tr class="GJPPK2LBCE" __gwt_subrow="0" __gwt_row="3">
</tbody>
<tbody style="display: none;">
<tfoot style="" aria-hidden="false">
</table>
If the order of the checkboxes is fixed you can use nth-of-type
input[type='checkbox']:nth-of-type(2)
This will find the second occurrence of input[type='checkbox'].
Or you can use nth-child.
table#reporting_add_report_tab_manual_ct_vars_usn tr:nth-child(2) td input
This finds the second tr in the table, in that row a td with an input.