could someone tell me why this isn't scaling the type in the class called "heading"?
I'm probably missing some vital element, but I can't see what it is!
Thanks!
Jim
#media only screen and (max-width: 480px)
{
/* iPhone only (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) - only screen and (max-width: 480px)
(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)*/
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
table {width: 100% !important;}
.responsive-image
img {
height: auto; line-height: 100% !important;
max-width: 100% !important;
width: 100% !important;
}
.heading
{ font-size: 10px !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="600" bgcolor="#FFFFFF">
<tr>
<td width="600"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 0 0px;" align="center" class="responsive-image" width="307" height="auto"><img src="http://contact.friendslife.co.uk/ukassets/images/482/Responsive_test/fpi_test_top_sky.jpg" width="100%" alt="" ></td>
<td width="266" bgcolor="#ED4134" style="font-family:Arial; font-weight:300; font-size:15px; color:#FFFFFF; padding:0px; text-align:right; class="heading">Newsletter June</td>
you missed a quote on the td ;)
<td width="266" bgcolor="#ED4134" style="font-family:Arial; font-weight:300; font-size:15px; color:#FFFFFF; padding:0px; text-align:right;" class="heading">Newsletter June</td>
Related
The <th> are stacked on top of each other and the <td> are also stacked on top of each other. I am trying to alternate <th>over <td> for mobile devices. Your feedback would be helpful!
confirmation.html
<table class="table table-hover table-bordered table-responsive-vertical">
<thead class="thead-light">
<tr class="text-center">
<th scope="col" data-toggle="true">Venue</th>
<th scope="col">Quantity</th>
<th scope="col">Ticket Price</th>
<th scope="col">Hearing Loop</th>
<th scope="col">Total Price</th>
</tr>
</thead>
<tbody>
{% for ticket in tickets %}
<tr class="text-center">
<th scope="row">{{ticket.venue}}</th>
<td class="text-center">{{ticket.quantity}}</td>
<td class="text-center">$25.00 each</td>
<td class="text-center">{{ticket.loop}}</td>
<td class="text-center">${{ticket.total | floatformat:2}}</td>
</tr>
<tr>
<th colspan="4" class="text-right">Sales Tax</th>
<td class="text-center">${{ticket.tax | floatformat:2}}</td>
</tr>
<tr>
<th colspan="4" class="text-right">Total</span></th>
<td class="text-center">${{ticket.total_price | floatformat:2}}</td>
</tr>
<tr>
<td>EditDelete</td>
<td colspan="4">Checkout</td>
</tr>
{% endfor %}
</tbody>
</table>
styles.css
#media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
table, thead, tbody, th, td, tr {
display: block;
}
tr {
margin: 0 0 1rem 0;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
}
Here's a demo of the technique I typically use for responsive tables. It's written for mobile-first.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table.responsive {
width: 100%;
max-width: 60em;
}
table.responsive thead {
display: none;
}
table.responsive tr {
display: block;
border-bottom: 1px solid #d0d0d0;
}
table.responsive td {
display: block;
padding: .75em .375em .75em 6.5em;
}
table.responsive td[data-header]:before {
content: attr(data-header) " ";
position: relative;
margin-left: -6.4em;
left: -.1em;
float: left;
padding-left: .375em;
max-width: 6em;
}
#media all and (min-width:360px) {
table.responsive td[data-header*="\20"]:before {
top: -1em;
}
}
#media all and (min-width:520px) {
table.responsive thead {
display: table-header-group;
}
.responsive>thead th {
text-align: left;
padding: .75em .375em;
}
table.responsive tr {
display: table-row;
border-bottom: 0 none;
}
table.responsive td {
display: table-cell;
padding: .75em .375em;
}
table.responsive td[data-header]:before {
display: none;
}
}
</style>
</head>
<body>
<table class="responsive">
<thead>
<tr>
<th>Title</th>
<th>Created</th>
<th>Last Accessed</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="Title">Donna's Printing</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">Test batch</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">For Mr. Baker</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">Endorsements</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
</tbody>
</table>
</body>
</html>
I'm building a responsive email message, and it's rendering well in every email client except for Gmail for iPhone 6 and 6+, using iOS 10. The only thing that's going wrong is that the registered trademark and copyright symbols in the message are appearing many font sizes larger and in a blue color, when they're supposed to be gray (#646464), 9px high, with a vertical-align property of 3px.
EMAIL_PRTNR_NAME in the code snippet represents a JavaScript variable which pulls in a brand name with a registered trademark in it.
I'm using the a[x-apple-data-detectors] style in the CSS, although the registered trademarks and copyright symbols are not linked to anything.
Has this happened to anyone before? Any ideas on how to fix?
Thank you in advance!
enlarged, blue registered trademark symbol
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30"> </td>
<td width="24" class="mobileHide"> </td>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">
<div style="font-family:Helvetica, Arial, sans-serif; height:6px; font-size:6px; line-height:6px;">
</div>
<table width="353" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;"><span style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">FULL_NAME</span><br></td>
</tr>
<tr>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:13px; font-family:Helvetica, Arial, sans-serif; line-height:22px;"><span style="-webkit-text-size-adjust:none; color:#646464; font-size:13px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">EMAIL_PRTNR_NAME</span><br></td>
</tr>
</table>
<div style="height:6px; font-size:6px; line-height:6px;">
</div>
</td>
<td width="30"> </td>
</tr>
</table>
©
<span style="line-height: 15px; vertical-align: 4px; font-size:12px;">Ⓒ</span>
®
<span style="line-height: 15px; vertical-align: 4px; font-size:13px;">Ⓡ</span>
™
<span style="line-height: 12px; vertical-align: 7px; font-size:8px;">TM</span>
<span style="line-height: 15px; vertical-align: 4px; font-size:12px;">Ⓒ</span>
<span style="line-height: 15px; vertical-align: 4px; font-size:13px;">Ⓡ</span>
<span style="line-height: 12px; vertical-align: 7px; font-size:8px;">TM</span>
I am experiencing a similar issue where google is replacing it with their 'goomoji' that is rendering with incorrect styling. I believe this is a bug in gmail and will fix itself.
To avoid Enlarged registered symbol in gmail and Outlook use this code.
©
<!--[if gte mso 9]>© <![endif]--> <!--[if !mso]><!--> Ⓒ<!--<![endif]-->
®
<!--[if gte mso 9]><span style="font-size: 55%; line-height: 0px; vertical-align: 4px;">®</span> <![endif]--><!--[if !mso]><!--><span style="font-size: 55%; line-height: 0px; vertical-align: 4px;">Ⓡ</span><!--<![endif]-->
I think Google fixed it - have been tested and looks OK for ® and ™
I'm trying to achieve a colored background for my table. I want that when it is on its responsive form, the first lines that are selected in the picture (the lines that start with this word "Caracteristiques") have a specific background color to structure my table, is this possible?
body{font-family:'Varela Round';}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
.responsive-table-line td:before { content: attr(data-title); }
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display:none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align:right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height:100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow:hidden !important;
text-align:left;
background-color:#f8f8f8;
padding:2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>
You can do what you are trying to do with :pseudo, I have added just two rules
body {
font-family: 'Varela Round';
}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
/**** Added CSS Rules ****/
tr:nth-child(1n+1) td:first-child {
background: red;
}
tr:nth-child(1n+1) td:first-child:before {
background: red;
}
/**** End of Added CSS Rules ****/
.responsive-table-line td:before {
content: attr(data-title);
}
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display: none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align: right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow: hidden !important;
text-align: left;
background-color: #f8f8f8;
padding: 2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>
Hope this helps :)
I want to create a tooltip as shown in pic. Value in title tag is coming from controller.
This is my table code:
<table border="1" cellpadding="10">
<tbody style="white-space: nowrap;">
<tr ng-repeat="row in rows">
<td style="width: 2%;">
<input type="checkbox"
ng-model="tableSelection[$index]"
style="margin-left: 10px;">
</td>
<td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;"
ng-repeat="col in input_columns"
droppable="dropable"
drop-fn="drop"
drop-index="$index"
drop-data="col"
title=""
ng-click="openDialog($event,$index)"
tempValue=""><enter data></td>
<td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;"
ng-repeat="col in output_columns"
droppable="dropable"
drop-fn="dropOutput"
drop-index="$index"
drop-data="col"
title=""
ng-click="openDialogOutputConst($event,$index)"><enter data></td>
</tr>
</tbody>
</table>
Can anyone help me how to provide a tooltip like this.
Something like this?
td {
position: relative;
}
td:hover:before {
content: attr(data-title);
position: absolute;
background-color: yellow;
top: 100%;
width: 200px;
white-space: normal;
word-spacing: 200px;
}
<table border="1" cellpadding="10">
<tbody style="white-space: nowrap;">
<tr ng-repeat="row in rows">
<td style="width: 2%;">
<input type="checkbox" ng-model="tableSelection[$index]" style="margin-left: 10px;">
</td>
<td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" ng-repeat="col in input_columns" droppable="dropable" drop-fn="drop" drop-index="$index" drop-data="col" data-title="Idaho Illinois Indiana Iowa Kansas Missouri Nebraska Ohio"
ng-click="openDialog($event,$index)" tempValue=""><enter data></td>
<td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" ng-repeat="col in output_columns" droppable="dropable" drop-fn="dropOutput" drop-index="$index" drop-data="col" data-title="Some text here" ng-click="openDialogOutputConst($event,$index)"><enter data></td>
</tr>
</tbody>
</table>
You could work with a :before :afterand do some manual positioning.
Using the :before as the stroke and the :after as the tooltip. You could create something like this.
body {
margin-top: 100px;
}
.item {
position: relative;
display: inline-block;
padding: 20px;
background: #fff;
border: 2px solid crimson;
// the stroke
// and the tooltip
// hide them by default
&:before,
&:after {
content: '';
position: absolute;
display: none;
}
// the stroke
&:before {
width: 100px;
height: 2px;
background: crimson;
right: -100px;
transform-origin: 0 0;
transform: rotate(-20deg);
}
// the tooltip itself
&:after {
content: attr(title);
color: #fff;
top: -30px;
right: -250px;
width: 150px;
padding: 5px;
background: #000;
}
// when hover the item,
// display before and after
&:hover {
&:before,
&:after {
display: inline-block;
}
}
}
https://jsfiddle.net/808443bt/
I am doing responsive mail and I need to make responsive td in table (without class or using media-query).
Simply - I need on small devices rank the td under them.
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width:100%; background-color: #fff; max-width:600px;">
<tr>
<td><img src="pic" /></td>
<td><a href="https://blahblah2.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah3.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah4.com/><img src="pic" /></a></td>
</tr>
</table>
You can try display:inline-block for every column in your table. It will make the columns shift below each column when width of the screen decreases.
As you have mentioned that you don't need class so m writing the inline style for each column. Try this code :
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width: 100%;
background-color: #fff; max-width: 600px;">
<tr>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
</tr>
</table>
Fiddle here
You can create a media query to force all the td elements to drop below each other at a certain screen width. This ensures they all become vertical-aligned at the same time. It also preserves the table's horizontal-aligned print format if you are generating a report for printing.
#media only screen and (min-width: 0px) and (max-width: 700px) {
td {
display:inline-block;
padding:5px;
width:100%;
}
}