I am making a table in CSS that will have some interesting animations on it. When clicking on the text field, it should expand, but in addition to this, it should make the button to the side of it move as well. Can anyone see an easy way of doing this? I've included the code here:
<html> <head> <title></title>
<style>
.input1 {
width: 30%;
padding: 5px 5px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 4px;
border: 2px solid #4CAF50;
-webkit-transition: width 0.35s ease-in-out;
transition: width 0.35s ease-in-out;
}
input[type=text]:focus {
background-color: #E8E8E8;
width: 45%;
button.width:50%;
}
.button {
background-color: #34B0D9;
radius: 12px;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
font-family: calibri;
font-size: 85%;
}
</style>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<table id="scoreboard" width="1000" style="border:1px solid #000000; z-index:5; position:absolute; left:250px; background-color: white;">
<tr>
<td style="font-size:180%; font-family:calibri black; padding-left:15px; padding-top:30px; padding-bottom:30px">Scoreboard</h1></td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy boats found:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy tiles checked:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Boats lost:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Time taken:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Result:</td>
</tr>
<tr>
<td style="padding-left:18px; padding-top:30px;"><input type="text" class="input1" placeholder="Enter name here..."></input></td>
</tr>
<tr>
<td style="padding-left:330px; padding-top:20px; padding-bottom:10px"><button class="button" style="padding: 8px">Submit score</button></td>
</tr>
</table>
</body>
</html>
If you can make the button go after the input (so that they are both siblings) you can use the general sibling selector: ~. The part you'd be interested in is:
input[type="text"]:focus ~ .button {
/* Your styles here */
}
This effectively selects: a .button that comes after a text field which is focused, and works as long as they're siblings (i.e. they are contained within the same element). So you can't have them wrapped in separate <td> tags.
This is of course, a pure CSS solution, so if they do have to be wrapped in separate tags, you'll need to use JS.
.input1 {
width: 30%;
padding: 5px 5px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 4px;
border: 2px solid #4CAF50;
-webkit-transition: width 0.35s ease-in-out;
transition: width 0.35s ease-in-out;
display: block;
}
input[type=text]:focus {
background-color: #E8E8E8;
width: 45%;
}
input[type=text]:focus + .button {
/* Whatever you want the button to do when the preceding input is focused */
min-width: 50%;
/* Note: we use min-width rather than width, as you can't transition `width:auto` */
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.button {
background-color: #34B0D9;
radius: 12px;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
font-family: calibri;
font-size: 85%;
min-width: 0;
/* Note: we use min-width rather than width, as you can't transition `width:auto` */
}
<html>
<head>
<title></title>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<table id="scoreboard" width="1000" style="border:1px solid #000000; z-index:5; position:absolute; left:250px; background-color: white;">
<tr>
<td style="font-size:180%; font-family:calibri black; padding-left:15px; padding-top:30px; padding-bottom:30px">Scoreboard</h1>
</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy boats found:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy tiles checked:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Boats lost:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Time taken:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Result:</td>
</tr>
<tr>
<td style="padding-left:18px; padding-top:30px; display:block">
<input type="text" class="input1" placeholder="Enter name here..."></input>
<button class="button">Submit score</button>
</td>
</tr>
</table>
</body>
</html>
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
This would be really easy using negative margins, but I can't use them inside a <table>. Been at this for hours last night and this morning. Already googled different types of navs and there's nothing like this.
How do I make the CSS arrow stick to the top and bottom of the vertical line? https://codepen.io/TylerL-uxai/pen/ZqYNjw
td {
padding-top: 10px;
padding-bottom: 10px;
}
.active {
font-weight: bold;
}
table {
border-collapse: collapse;
}
.right{
text-align: right;
border-right: 1px solid black;
}
.v {
text-align: right;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.dot {
height: 10px;
width: 10px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div class="menu">
<table>
<tr>
<td class="v">
<i class="arrow up"></i>
</td>
<td>
Abstract
</td>
</tr>
<tr>
<td class="right">
Why
</td>
</tr>
<tr>
<td class="right">
<div class="active">Home</div>
</td>
<td><span class="dot"></span> <small> You are here.</small></td>
</tr>
<tr>
<td class="right">
Examples
</td>
</tr>
<tr>
<td class="right">
Process
</td>
</tr>
<tr>
<td class="right">
Tools
</td>
</tr>
<tr>
<td class="v"><i class="down"></i></td>
<td style="padding-left: 10px;">
Concrete
</td>
</tr>
</table>
</div>
Position relative and then use top & right negatives
.v {
position: relative;
right:-6px;
top: -15px;
text-align: right;
}
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*/
I would like my "feild labels" to be aligned in the center of their corresponding text fields. I have tried many different ways, and to get it centered on the page, I used tables. I am currently using "display: inline-block;" and "vertical-align: middle;" with no success.
Image Link
My HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>DNA Translator</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<script></script>
</head>
<body>
<div>
<form>
<table valign="center" id="table1">
<tr>
<td class="labels">DNA:</td>
<td class="spacer"></td>
<td><input type="text" name="dna" placeholder="DNA"></td>
</tr>
<tr>
<td class="labels">mRNA:</td>
<td class="spacer"></td>
<td><input type="text" name="mrna" placeholder="mRNA"></td>
</tr>
<tr>
<td class="labels">tRNA:</td>
<td class="spacer"></td>
<td><input type="text" name="trna" placeholder="tRNA"></td>
</tr>
<tr>
<td class="labels">Amino Acids:</td>
<td class="spacer"></td>
<td><input type="text" name="aminoAcids" placeholder="Amino Acids"></td>
</tr>
<tr>
<td></td>
<td class="spacer"></td>
<td class="button"><button id="button_translate" type="button">Tanslate</button>
<button id="button_clear" type="button">Clear</button></td>
</tr>
</table>
<!--<div id="text">
<p>DNA: </p><input type="text" name="dna" placeholder="DNA"><br>
<p>mRNA: </p><input type="text" name="mrna" placeholder="mRNA"><br>
<p>tRNA: </p><input type="text" name="trna" placeholder="tRNA"><br>
<p>Amino Acids: </p><input type="text" name="aminoAcids" placeholder="Amino Acids"><br>
</div>
<div>
<button id="button_translate" type="button">Tanslate</button>
<button id="button_clear" type="button">Clear</button>
</div>-->
</form>
</div>
</body>
</html>
My CSS (as you can see I've tried a lot of things):
div.container {
width:98%;
margin:1%;
}
table#table1 {
margin-left:auto;
margin-right:auto;
/*width:530px;*/
}
td {
height:20px;
}
td.button {
height:40px;
}
td.labels {
width:89px;
display: inline-block;
text-align:right;
vertical-align: middle;
}
td.spacer {
width:15px;
}
#button_translate
{
opacity: 0.7;
display: inline-block;
height:35px;
width:200px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 15px auto;
}
#button_clear
{
opacity: 0.7;
display: inline-block;
height:35px;
width:200px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 15px auto;
}
input[type="text"]
{
width: 390px;
display:/*block;*/ inline-block;
vertical-align:middle;
height:20px;
padding:4px 6px;
margin-bottom:20px;
font-size:14px;
line-height:20px;
color:#555;
vertical-align:middle;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
background-color:#fff;
border:1px solid #ccc;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s
}
#text
{
width: 450px ;
margin-top; 800px;
margin-left: auto ;
margin-right: auto ;
}
You can add padding to your .labels css property, in your case, around 6px should do it!
td.labels {
width: 89px;
display: inline-block;
text-align: right;
padding-top: 6px;
vertical-align: middle;
}
Also, you have way too many elements for something that could be so simple:
DEMO: http://jsfiddle.net/shannonhochkins/d4rLD/2/
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>