I'm trying to understand coding of my Wordpress site better, so I set my mind on eliminating as much as plugins as possible, starting with a table plugin which shouldn't be very hard..
I want the table to show in a fixed width (756px) and I want it to scroll if the content is viewed on smaller displays or when the browser window is resized. The goal is to keep the table layout exactly the same.
The problem is that when I specify a width, the table just gets clipped without the option to scroll and when I set the width to 100% the table resizes which I don't want.
I tried reverse engineering the plugin I use, but I guess I don't have the knowledge yet to pull it off.
It's taken a long time now and I just want to move on to the next obstacle:)
Table so far
html:
<div class="tabel">
<table>
<tr>
<th>Eten & Drinken<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/eten-en-drinken-kraam.png" /></th>
<th>Slapen<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/slapen.png" /></th>
<th>Vervoer<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/vervoer-trein-icon.png" /></th>
<th>Excursies<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/excursies.png" /></th>
<th>Overige<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/overige.png" /></th>
<th>Totaal</th>
</tr>
<tr>
<td>₱ 35.460,05</td>
<td>₱ 30.484,84</td>
<td>₱ 16.254,76</td>
<td>₱ 5.836,00</td>
<td>₱ 4.086,28</td>
<td>₱ 92.121,93</td>
</tr>
<tr>
<td>€673,74</td>
<td>€579,21</td>
<td>€308,84</td>
<td>€110,88</td>
<td>€77,64</td>
<td>€1.750,32</td>
</tr>
</table>
</div>
css:
.tabel {
white-space: nowrap;
overflow-x: auto;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
background: -webkit-radial-gradient(top left, rgba(185,204,102,0.5), rgba(144,72,138,0.5));
}
table {
border-collapse: collapse;
border: 3px solid black;
table-layout: fixed;
}
tr, th, td {
text-align:center;
border: 1px solid black;
margin: 5px;
white-space: nowrap;
}
th {
vertical-align: top;
}
I got it figured out.. For anyone interested.. here is the result and the answer.
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="livecss.css">
</head>
<body>
<table class="tabel">
<tr>
<th colspan="6">Indonesië - 29 dagen</th>
</tr>
<tr>
<th>Eten & Drinken<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/eten-en-drinken-kraam.png" /></th>
<th>Slapen<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/slapen.png" /></th>
<th>Vervoer<br /><img src="http://travelaar.nl/wp-content/uploads/2016/12/vervoer-trein-icon.png" /></th>
<th>Excursies<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/excursies.png" /></th>
<th>Overige<br /><img src="http://travelaar.nl/wp-content/uploads/2016/03/overige.png" /></th>
<th>Totaal</th>
</tr>
<tr>
<td>₱ 35.460,05</td>
<td>₱ 30.484,84</td>
<td>₱ 16.254,76</td>
<td>₱ 5.836,-</td>
<td>₱ 4.086,28</td>
<td>₱ 92.121,93</td>
</tr>
<tr>
<td>€ 673,74</td>
<td>€ 579,21</td>
<td>€ 308,84</td>
<td>€ 110,88</td>
<td>€ 77,64</td>
<td>€ 1.750,32</td>
</tr>
</table>
css (including custom scrollbars;))
/*TABEL CSS*/
table {
overflow-x: auto;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
/*background: -webkit-radial-gradient(top left, rgba(185,204,102,0.5), rgba(144,72,138,0.5))*/
border-collapse: collapse;
display: block;
table-layout: fixed;
border-style: hidden;
}
th, td {
border: 1px solid white;
white-space: nowrap;
}
th {
text-align: center;
vertical-align: top;
background-color: #b9cc66;
padding: 5px;
}
td {
text-align: right;
padding: 5px 10px 5px 5px;
background-color: rgba(144,72,138,0.5)
}
.tabel tr > td:last-of-type {
background-color: rgba(144,72,138,0.8)
}
/*SCROLLBAR STYLE*/
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(185,204,102,0.2);
}
/*EINDE SCROLLBAR STYLE*/
/*EINDE TABEL CSS*/
Related
I can't seem to get media queries to work - at least for the one relevant style which needs to work - padding for the table-wrapper class. The padding set inline always wins.
I believe I need to have !important set for the media query so I do have that.
Media queries are at the top of the html
This is at the top of the html - <meta name="viewport" content="width=device-width">
The rest of the styles are inline / done by an app.
Anyone know what I might be missing?
https://codepen.io/lg00/pen/LvrXVY
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title></title>
<style>
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.header-title h1 {
font-size: 25px !important;
}
}
</style>
<div class="email-wrapper" style="background-color:#F5F6F7">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<!-- PADDING SET HERE -->
<table cellpadding="0" cellspacing="0" class="table-wrapper" style="margin:auto; margin-top:50px; background-color:#fff; padding:64px 100px">
<tbody>
<tr>
<td class="container header" style="background-repeat:no-repeat; border-top-left-radius:6px; border-top-right-radius:6px; text-align:center; color:#000; padding-bottom:32px; display:block !important; margin:0 auto !important; clear:both !important">
<div class="header-title" style="font-weight:bold">Test</div>
</td>
</tr>
<tr>
<td class="content" style="border-bottom-left-radius:6px; border-bottom-right-radius:6px; margin:0 auto !important; clear:both !important">
<div class="header-title" style="color:#000; text-align:center">
<h1 style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom:15px; color:#47505E; margin:0px 0 10px; line-height:1.2; font-weight:200; line-height:45px; font-weight:bold; margin-bottom:30px; font-size:28px; line-height:40px; margin-bottom:32px; font-weight:400; color:#000; padding-top:0px">Test The Length of the Title - Will it Wrap</h1>
</div>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="text-center" style="text-align:center">
Test
</td>
</tr>
</tbody>
</table>
<table class="data-table bordered" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px; border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<tbody>
<tr>
<td class="data-table-title" style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; font-weight:bold; font-size:20px; padding-top:0px">Test</td>
</tr>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
</tr>
<tr class="bordered" style="border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">test</td>
</tr>
</tbody>
</table>
<table class="data-table" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px">
<tbody>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test</span><br>
test<br>
</p>
</td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; width: 20%"></td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test2</span><br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="width:100%; text-align:center; clear:both !important">
<p class="text-center" style="text-align:center; font-size:12px; color:#666">Test</p>
</div>
<br>
</td>
</tr>
</tbody>
</table>
</div>
It is a specificity issue in your media queries. Move .header-title above .table-wrapper since the padding is overriding what is being set in .table-wrapper
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
Change your css to this, I hope it will work.
<style>
//Default styling
.table-wrapper {
width: 50%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
.header {
border-radius: 0px;
}
.header-title {
padding-left: 20px;
padding-right: 20px;
}
.header-title h1 {
font-size: 25px;
}
}
</style>
Please check the CSS specificity, as you said the in-line style is the most specific selector and "wins".
CSS specificity:
Inline Style
ID, Class
Pseudo-class, atributes
Elements, pseudo-element
I am having issues with my CSS for my current design. I have everything pretty much completed. However, in the final product, I am noticing that the "View Participation Button" is not aligned with other "View Participation Buttons." They seem up and down. The should all be aligned. I adjusted the surrounding table/box so that they are aligned by fixing the height to 150px. Can anyone see the error in my code and point out how this one part can be fixed? I have a picture below on what it looks like:
<style type="text/css">
/*<![CDATA[*/
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
.em_black a {
text-decoration: none;
color: #000000;
}
.em_white a {
text-decoration: none;
color: #ffffff;
}
.em_blue a {
text-decoration: none;
color: #0a75b1;
}
.em_grey a {
text-decoration: none;
color: #4d4d4d;
}
.em_g_img + div {
display: none;
}
#media only screen and (min-width: 481px) and (max-width: 667px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_wrapper2 {
width: 100% !important;
height: 150px !important
}
.em_hide {
display: none !important;
}
.em_full_img {
width: 100% !important;
height: auto !important;
}
.em_full_img img {
width: 100% !important;
height: auto !important;
}
.em_side10 {
width: 10px !important;
}
.em_ptop {
padding-top: 20px !important;
}
/* Padding Left Right Bottom */
.em_h20 {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_w300 {
width: 320px !important;
}
.em_w280 {
width: 320px !important;
}
.em_font_18 {
font-size: 27px !important;
line-height: 31px !important;
}
}
#media screen and (max-width: 480px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_wrapper2 {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_full_img {
width: 100% !important;
height: auto !important;
}
.em_full_img img {
width: 100% !important;
height: auto !important;
}
.em_side10 {
width: 10px !important;
}
.em_side_10 {
width: 10px !important;
}
.em_ptop {
padding-top: 20px !important;
}
/* Padding Left Right Bottom */
.em_h20 {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_font_18 {
font-size: 18px !important;
line-height: 23px !important;
}
.em_w300 {
width: 300px !important;
}
/* update the N number as per width */
.em_w280 {
width: 300px !important;
}
.em_w146 {
width: 146px !important;
}
.em_aside25 {
padding: 0px 25px !important;
}
u + .em_body .em_full_wrap {
width: 100% !important;
width: 100vw !important;
}
}
A sample of my code is below:
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" class="em_ptop">
<table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tbody>
<tr>
<td align="center" valign="top">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#9E9F9F" style="background-color:#9e9f9f; color:#fff;">
Feature Presenter 3
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table>
</td>
</tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;">
<img src="./TREATMENT OPTIONS FOR ADVANCED BREAST CANCER_files/oshughnessy-joyce-800.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4D4D4D" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;height:150px" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px;">
<span style="font-weight:bold;">Joyce O’Shaughnessy</span><br>
Baylor University Medical Center
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#007F3D" style="border-radius:5px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold;">
<a target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3" style="text-decoration:none; color:#ffffff; display:block; line-height:16px;">View
Participation<br>
Options
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
I can add the CSS styling too if needed but I think the inline CSS that I have is what needs to be adjusted/modifyed/added.
I've started by completely throwing out your table based layout, this simplifies the HTML. Then I've taken away the inline styles, which simplifies things further.
So we have a list of things, order doesn't matter so lets use an unordered list (ul).
You have many options on how to lay out the list elements, I've chose display:block for simplicity. You could also look at Flex, CSS Grid, or even CSS Tables.
To align the buttons to the bottom, I've created an element with a fixed height, set that to position:relative. I've then applied position:absolute to the button element and set the position relative to the bottom of the parent element.
.presenters {
list-style: none;
padding: 0;
}
.presenter {
display: inline-block;
margin-right: 10px;
width: 158px;
background-color: #4D4D4D;
color: #FFF;
border-radius: 0 0 5px 5px;
vertical-align: top;
overflow: hidden;
}
.presenter-imgContainer {
background-color: #FFF;
border: solid 2px #9e9f9f;
}
.presenter-img {
display: block;
width: 155px;
}
.presenter-title {
background-color: #9E9F9F;
font-size: 16px;
font-weight: 400;
text-align: center;
width: 155px;
margin: 0;
}
.presenter-content {
/*Set a sensible fixed height*/
height: 80px;
/*Give enough room in the bottom padding
For the action element
*/
padding: 8px 10px 70px;
/*We want to postion the action element
relative to this
*/
position: relative;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
line-height: 17px;
text-align: center;
}
.presenter-name {
font-weight: bold;
}
.presenter-action {
background-color: #007F3D;
display: block;
padding: 10px 5px;
text-decoration: none;
color: white;
border-radius: 5px;
/*Postion the button at the bottom*/
position: absolute;
bottom: 10px;
width: calc(100% - 30px);
}
<ul class="presenters">
<li class="presenter">
<div class="presenter-imgContainer">
<h2 class="presenter-title">Feature Presenter 2</h2>
<img class="presenter-img" src="https://www.fillmurray.com/154/189" />
</div>
<div class="presenter-content">
<div class="presenter-name">Dennis Salmon</div>
<div class="presenter-desc">UCLA Medical Center</div>
<a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
</div>
</li>
<li class="presenter">
<div class="presenter-imgContainer">
<h2 class="presenter-title">Feature Presenter 3</h2>
<img class="presenter-img" src="https://www.fillmurray.com/154/189" />
</div>
<div class="presenter-content">
<div class="presenter-name">Joyce O’Shaughnessy</div>
<div class="presenter-desc">Baylor University Medical Center</div>
<a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
</div>
</li>
</ul>
I'm creating an table and have styled it accordingly on CSS. The code works (https://jsfiddle.net/he16Lxz9/) however when it's nested within an accordion, the styling disappears (http://firebird.sheridanc.on.ca/~ixd487/hire%20brighter/co-op.html)
HTML
<table>
<tr>
<td>Length of Internship</td>
<td>4, 8, 12, 16 Months</td>
</tr>
<tr>
<td>Paid or Unpaid</td>
<td>Paid</td>
</tr>
<tr>
<td>Weekly Commitment</td>
<td>Minimum 35hrs/week</td>
</tr>
<tr>
<td>Start Date</td>
<td>September, January, or May</td>
</tr>
<tr>
<td>Contact</td>
<td>Email: engcoop#mcmaster.ca <br> Phone: (905)-525-9140 ext. 24674</td>
</tr>
</table>
CSS
table {
width: 100%;
border-collapse: collapse;
font-family: 'Barlow Semi Condensed', sans-serif;}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;}
th {
background: #333;
color: white;
font-weight: bold;}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
I have a table with 3 columns. I'd like to remove the border/cellspacing between the first and second columns, and make it appear like one column.
Fiddle: https://jsfiddle.net/o8x3ego0/1/
HTML
<table id="holdingsDistributionTable" class="table table-responsive">
<tr>
<th colspan="2">Currency</th>
<th>Value</th>
</tr>
<tr>
<td>
<div class="currencyHolder greenCurrencyHolder">
<div class="currency greenCurrency">
AED
</div>
</div>
</td>
<td>
<div style="text-align: center">
UA Emirates Dirham
</div>
</td>
<td>
<b>345</b>
</td>
</tr>
<tr>
<td>
<div class="currencyHolder blueCurrencyHolder">
<div class="currency blueCurrency">
ARS
</div>
</div>
</td>
<td>
<div style="text-align: center">
Argentine Peso
</div>
</td>
<td>45345</td>
</tr>
</table>
In the above example, I'd like to remove the spacing between the 1st and 2nd columns in the data rows.
You can remove the border from the entire table by:
table {
border-collapse: collapse;
}
Then to add borders to the rows, table headers and the last table cells (or whatever table cells necessary by using :nth-child):
tr, th, td:last-child {
border: 1px solid black; /* changed to black to be more noticeable */
}
Then remove padding from the table header and table cells:
th, td {
padding: 0;
}
Here is the updated fiddle.
edit: it was col and not row, so i believe this is more like this : https://jsfiddle.net/o8x3ego0/6/ (same method, but padding to draw the hole in between th )
you can use
border-collapse to remove cellspacing and to allow style tr borders
a line-height to th instead padding
draw a transparent border at bottom of th (padding works too)
and erase bg color with background-clip to mimic the border-spacing only where you want to
body {
background-color: white;
}
/* demo */
tr:nth-child(1) th {
border-bottom: 3px solid transparent;
background-clip: content-box
}
table {
border-collapse: collapse;
}
/* end */
.table {
margin-bottom: 20px;
}
.table-responsive {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.currencyHolder {
padding: 7px;
border-radius: 5px;
border-width: 2px;
border-style: solid;
margin-top: 10px;
margin-bottom: 10px;
max-width: 36px;
text-align: center;
}
.currency {
border-radius: 5px;
color: white;
font-size: 11px;
font-weight: bold;
}
.greenCurrencyHolder {
background-color: green;
border-color: darkgreen;
}
.greenCurrency {
background-color: darkgreen;
}
.blueCurrencyHolder {
background-color: azure;
border-color: cadetblue;
}
.blueCurrency {
background-color: cadetblue;
}
#holdingsDistributionTable {
display: table;
/*width: 100% !important;*/
}
#holdingsDistributionTable th {
background-color: #F4F5F6;
color: #AAABAE;
line-height: 2.5em;
/* instead vertical padding */
width: 25%;
font-weight: normal;
}
#holdingsDistributionTable th:last-child,
#holdingsDistributionTable td:last-child {
background-color: #DFE1E3;
color: #A19D9E;
}
#holdingsDistributionTable td:last-child {
background-color: #DFE1E3;
color: black;
}
#holdingsDistributionTable th,
#holdingsDistributionTable td {
min-height: 15px;
background-color: #F4F5F6;
}
<table id="holdingsDistributionTable" class="table table-responsive">
<tr>
<th colspan="2">Currency</th>
<th>Value</th>
</tr>
<tr>
<td>
<div class="currencyHolder greenCurrencyHolder">
<div class="currency greenCurrency">
AED
</div>
</div>
</td>
<td>
<div style="text-align: center">
UA Emirates Dirham
</div>
</td>
<td>
<b>345</b>
</td>
</tr>
<tr>
<td>
<div class="currencyHolder blueCurrencyHolder">
<div class="currency blueCurrency">
ARS
</div>
</div>
</td>
<td>
<div style="text-align: center">
Argentine Peso
</div>
</td>
<td>45345</td>
</tr>
</table>
The best solution would be to make your table only two columns in the first place and do not use colspan="2" then make the stylized currency abbreviation line up with the currency name by setting the two div in each column inline block items using display: inline-block; in your CSS
Fiddle: https://jsfiddle.net/f30tujzn/
this solution is not only easier then removing part of your border but will render faster, and respond better on smaller devices.
Firstly apologies with my limited knowledge, I am just starting out in CF.
So I am trying to send out an html email with cfmail when a form query is satisfied.
The problem I am having is that the css I am embedding within the email head is either throwing up errors or just not formatting at all. Please could someone look at my code and tell me where I am going wrong.
Incidentally when I take out the # tags in the css it seems to work but the email sends with no formatting!!!
<cfmail to="customer email" from="xxxxxxx#gmail.com" subject="Your order at has been shipped" type="html">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<style type="text/css">
body {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
p {
margin-top: 0px;
margin-bottom: 20px;
}
a, a:visited, a b {
color: #378DC1;
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
#container {
width: 680px;
}
#logo {
margin-bottom: 20px;
}
table.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
table.list td {
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
table.list thead td {
background-color: #EFEFEF;
padding: 0px 5px;
}
table.list thead td a, .list thead td {
text-decoration: none;
color: #222222;
font-weight: bold;
}
table.list tbody td a {
text-decoration: underline;
}
table.list tbody td {
vertical-align: top;
padding: 0px 5px;
}
table.list .left {
text-align: left;
padding: 7px;
}
table.list .right {
text-align: right;
padding: 7px;
}
table.list .center {
text-align: center;
padding: 7px;
}
</style>
</head>
<body>
<div id="container">
<p>Your Order has been Shipped</p>
<table class="list">
<thead>
<tr>
<td class="left" colspan="2">text_order_detail;</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left"><b>text_order_id</b><br />
<b>text_date_added</b><br />
<b>text_payment_method</b><br />
<b>text_shipping_method</b>
</td>
<td class="left"><b>text_email</b><br />
<b>text_telephone</b><br />
<b>text_ip<br /></td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_instruction</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">comment</td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_payment_address</td>
<td class="left">text_shipping_address</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">payment_address</td>
<td class="left">shipping_address</td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_product</td>
<td class="left">text_model</td>
<td class="right">text_quantity</td>
<td class="right">text_price</td>
<td class="right">text_total</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">product
<br />
<small>option</small>
</td>
<td class="left">product['model']</td>
<td class="right">product['quantity']</td>
<td class="right">product['price']</td>
<td class="right">product['total']</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="right"><b>total['title']</b></td>
<td class="right">total['text']</td>
</tr>
</tfoot>
</table>
<p>text_footer</p>
<p>text_powered</p>
</div>
</body>
</html>
</cfmail>
</cfif>
Two issues the first is you need to use ## in your CSS instead of #, otherwise ColdFusion tries to process those as variables. The second is you have an erroneous </cfif> at the bottom of your page, but that was probably just from when you copy and pasted your code.
I tested the code with ## instead of # and the email sent correctly on CF 9.0.1
You should stick to inline styles for HTML emails rather than having your styles presented the way you are doing.
E.G.
<td style="padding:10px;"></td>