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;
}
Related
I found out that you can't style thead, tr, or tbody. What I want to do is have a 2px white border between the cells and doesn't over lap and give the table a border radius where the table cells don't break the radius.
body {
background-color: blue;
color: white;
}
table {
border-collapse: separate !important;
width: 100%;
border: 2px solid white;
border-radius: 12px !important;
}
th {
padding : 12px;
border: 2px solid white;
}
td {
padding : 12px;
border: 2px solid white;
}
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kyle</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>2</td>
<td>Brit</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>3</td>
<td>Trevor</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>4</td>
<td>Justin</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>5</td>
<td>Dave</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
</tbody>
</table>
Is there a way of going about this?
Also I tried to add the reset I was using to the code and everything broke because I don't know how to add it before the css that runs in the code snippet example:
https://meyerweb.com/eric/tools/css/reset/reset.css
Its isn't quite true that you cant style th, tr, td elements in a table. You can see below how the background colour of th & tr is changed.
You can target cells in the corners through pseudo classes such as :first-child, :last-child and add individual border radius property.
In your sample code I've used these properties to mention the borders.
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
body {
background-color: blue;
color: white;
}
table {
border-collapse: separate !important;
width: 100%;
border: 2px solid white;
border-radius: 12px !important;
}
th {
padding : 12px;
border: 2px solid white;
background: red;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
}
td {
padding : 12px;
border: 2px solid white;
}
tr:nth-child(even) {
background: grey;
}
tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kyle</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>2</td>
<td>Brit</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>3</td>
<td>Trevor</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>4</td>
<td>Justin</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>5</td>
<td>Dave</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
</tbody>
</table>
I have seen a few similar questions but they don't match what I am after. I have a situation where a table can have inner tables. However, I like the inner table to ignore the styles defined by "myTable". How can I do this?
Preferably, without adding a CSS for inner table. Or at least without adding a new class or reference to an ID for the inner table. Thank you for any help.
#myTable td, #myTable th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
Deryck has the right answer altough it's not complete because of browser implementation and missing tr
#myTable > tbody > tr > td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > tbody > tr > th {
border: 1px solid #ddd;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
If you are trying to make it so the styles you have there don't apply to anything but the specific children (tr, th, etc at the top level) you can use > to specify the style to only apply to the direct children of #myTable
#myTable > td, #myTable > th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
I've got a table showing participation of countries in a project in 2013 and 2018. For a year in which a country participated, we want to display a black circle. The cell will be empty for a year in which the country didn't participate.
For the sake of accessibility, I was figuring on having "Yes" and "No" in the table, and then using CSS repositioning and the ::before pseudo-element to put the screen reader-readable text off-screen and swap the black circle into place in the Yes cells.
I could tell that the black circle wasn't centered. To emphasize what was going on, I replaced "Yes" with "Affirmative" and replaced "No" with a hollow circle instead of nothing. The display produced by the code below shows that the circles are being displayed at the left of where the words "Affirmative" and "No" would have been if I hadn't displaced them. How can I display the symbols centered in the columns instead?
<!DOCTYPE html>
<html>
<style>
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
/* Indicator symbol substitution */
table tbody td .yes {
position: relative;
left: -999em;
width: 0;
}
table tbody td .yes::before {
position: relative;
left: 999em;
content: "\0025cf";
}
table tbody td .no {
position: relative;
left: -999em;
width: 0;
}
table tbody td .no::before {
position: relative;
left: 999em;
content: "\0025cb";
}
</style>
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th><th scope="col" class="indicator">2013</th><th scope="col" class="indicator">2018</th>
</tr>
</thead>
<tbody>
<tr> <th scope="row">Australia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Bolivia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Croatia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Denmark</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Ethiopia</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">France</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Germany</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
</tbody>
</table>
</html>
This gives me:
Without the substitution, I get the following, which shows that the symbols are being positioned at the left edge of where the words would be if I hadn't displaced them.
Can anyone give me any tips? I've tried setting widths of the displaced text to 0 and hiding overflow, to no avail.
The problem with this approach (if you care about accessibility) is that CSS pseudo-elements aren't actually added to the DOM. Most browsers will compensate for this, but Internet Explorer doesn't. There are enough people using IE that this matters. Resizing content to zero pixels height or width will also prevent screen readers from announcing the content.
A better way of approaching this issue would be to load all content into the DOM and then use the aria-hidden attribute on the content you DON'T want screen readers to announce.
Here's a fiddle of a more accessible version of this:
https://jsfiddle.net/2jvL6f0L/
No need to hide span by positioning it to -999em.
See the following solution. Hope this will help. (JSFiddle link)
Here I've just made the span text transparent and positioned :before by calc(). This will always make it aligned in the middle.
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
/* Indicator symbol substitution */
table tbody td .yes {
position: relative;
width: 100%;
color: transparent;
display: block;
}
table tbody td .yes::before {
position: absolute;
left: calc(50% - 10px);
content: "\0025cf";
display: block;
color: #000;
width: 20px;
}
table tbody td .no {
position: relative;
width: 100%;
color: transparent;
display: block;
}
table tbody td .no::before {
position: absolute;
left: calc(50% - 10px);
content: "\0025cb";
display: block;
color: #000;
width: 20px;
}
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th><th scope="col" class="indicator">2013</th><th scope="col" class="indicator">2018</th>
</tr>
</thead>
<tbody>
<tr> <th scope="row">Australia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Bolivia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Croatia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Denmark</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Ethiopia</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">France</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Germany</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
</tbody>
</table>
Well, I came up with one solution: set display: block; on the ::before. That has a couple of side effects: the table rows are now taller than I'd like, even though I've set padding and margin to 0; and the circles aren't vertically centered, and setting vertical-align: middle; doesn't fix that. I've wound up setting top: 4px; but I'm not thrilled with that approach.
Incorporating ideas from previous responses here, I've now come up with the following replacement for my previous approach.
table tbody td.indicator {
text-align: left; /* not center */
}
...
table tbody td .yes {
position: relative;
left: -999em;
}
table tbody td .yes::before {
position: relative;
left: calc(50% + 998.75em);
content: "\0025cf";
}
Below is one solution that should help.
I moved the Affirmative and No into the title attribute of the <span> and placed the HTML elements for the two kinds of circles as the content of the <span>
This removed the need for the :before in the CSS.
The title helps with Accessibility, but not really since all the screen readers will read is the word "Affirmative" or "No" with no context. It might be better, if you are concerned about screen readers to improve on the title attribute to be something more like: title="Affirmative for Germany in 2013" or something like that.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
</style>
</html>
<body>
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col" class="indicator">2013</th>
<th scope="col" class="indicator">2018</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Australia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="No">○</span></td>
</tr>
<tr>
<th scope="row">Bolivia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Croatia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="No">○</span></td>
</tr>
<tr>
<th scope="row">Denmark</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Ethiopia</th>
<td class="indicator"><span title="No">○</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">France</th>
<td class="indicator"><span title="No">○</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Germany</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
</tbody>
</table>
</body>
</html>
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*/
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>