I am new to html and css so i am not that good. The problem i have right now is that i have created a nested table with two tables. I got four columns with the blue color. But the problem is that i dont know how to get yellow lines like the flag has. The code i come so far is below.
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: #0000ff;}
table.yellow {background-color: #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
<table class="blue" border="1" width="100%">
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</body>
</html>
(Image of Swedish Flag)
Not table but just div https://jsfiddle.net/2Lzo9vfc/134/
CSS
.flag {
background-color: #006AA7;
width: 500px;
height: 300px;
position: relative;
}
.flag::before {
background-color: #FECC00;
content: "";
height: 15%;
left: 0;
margin-top: -5%;
position: absolute;
top: 50%;
width: 100%;
}
.flag::after {
background-color: #FECC00;
content: "";
height: 100%;
left: 30%;
margin-left: -5%;
position: absolute;
top: 0;
width: 9%;
}
HTML
<div class="flag"></div>
It seems overly complicated to use tables for this. You can very simply achieve the desired result with absolute positioning. Notice how much less code this is:
.flag {
background: #0000ff;
position: relative;
width: 400px;
height: 300px;
}
.vertical {
background: #ffff00;
position: absolute;
left: 30%;
width: 60px;
height: 300px;
}
.horizontal {
background: #ffff00;
position: absolute;
top: 50%;
width: 400px;
height: 60px;
margin-top: -30px;
}
<div class="flag">
<div class="vertical"></div>
<div class="horizontal"></div>
</div>
Just for kicks..just one table.
table {
margin: 1em auto;
border-collapse:collapse;
}
td {
background: blue;
padding: 20px;
}
tr:nth-child(4) td,
td:nth-child(3) {
background: yellow;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Use CSS borders and border-collapse:collapse. Adjust the border width as necessary.
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: #0000ff;border-collapse:collapse}
table.yellow {background-color: #ffff00;border-collapse:collapse}
.top-left {border-bottom: 12px solid #ffff00;border-right: 12px solid #ffff00;}
.top-right {border-bottom: 12px solid #ffff00;border-left: 12px solid #ffff00;}
.bottom-left {border-top: 12px solid #ffff00;border-right: 12px solid #ffff00;}
.bottom-right {border-top: 12px solid #ffff00;border-left: 12px solid #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
<table class="blue" border="1" width="100%">
<tr>
<td height="40" class="top-left">blue</td>
<td class="top-right">blue</td>
</tr>
<tr>
<td height="40" class="bottom-left">blue</td>
<td class="bottom-right">blue</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</body>
</html>
You can set the border for every side seperatly per cell:
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: blue;border-collapse: collapse;}
.sweden_cell1 { border-right: 5px solid #ffff00;border-bottom: 5px solid #ffff00;}
.sweden_cell2 { border-left: 5px solid #ffff00;border-bottom: 5px solid #ffff00;}
.sweden_cell3 { border-right: 5px solid #ffff00;border-top: 5px solid #ffff00;}
.sweden_cell4 { border-left: 5px solid #ffff00;border-top: 5px solid #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
<table class="blue" border="1" width="100%">
<tr>
<td class="sweden_cell1" height="40">blue</td>
<td class="sweden_cell2">blue</td>
</tr>
<tr>
<td class="sweden_cell3" height="40">blue</td>
<td class="sweden_cell4">blue</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Also as you can see you need the border-collapse: collapse; property to make the borders have no space between them
Futhermore if you wish to make the yellow part wider, just increase the pixel with of the border in the css (which is as 5px atm)
I think you can't make that space between columns and rows. You could make table with 3 rows and columns, paint cells in yellow and blue. But here you can find more interesting idea of swedish flag with just one div. http://talgautb.github.io/vexillum/demo/
You need to use border-collapse and add the borders to the cells of the table.
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {
background-color: #0000ff;
border-collapse: collapse;
width:320px;
}
.border-right { border-right: 30px solid #ffff00;}
.border-bottom { border-bottom: 30px solid #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table>
<tr>
<td>
<table class="blue" border="1">
<tr class="border-bottom">
<td height="60" width="30%" class="border-right"></td>
<td width="70%"></td>
</tr>
<tr>
<td height="60" width="30%" class="border-right"></td>
<td width="70%"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</body>
</html>
With the following adjustments to your CSS it kind-of looks like the swedish flag.
I used various different CSS selectors to make this happen, altho I doubt that it'll be easy to understand I'll try to explain
I removed a table from your HTML, it was redundant as the swedish flag yellow areas can be created through the borders just one table.
What I did was gave every td element in your table a border: 10px solid #ffff00 which creates borders around every td element.
then after that I used some more complex selectors to target specific td elements and remove borders where they weren't required.
So the first tr element in the table can be selected with :first-child (just like any other first child to a parent can be selected like this). but then we also want the first td from that which makes for the total selector:
table.blue tr:first-child td:first-child { ... }
as you can see below the CSS resets the border-top and border-left properties as this is the top-left td so the top and left part don't need the yellow border.
I simply followed the same principle with the rest of the selectors, targetting specific td elements and resetting the borders they did not need.
After that I also added some properties to reset the spacing between the borders to 0 with cellspacing="0" cellpadding="0" - these two properties aren't consistently available in CSS so they have to be put in the HTML.
I also removed the redundant border property on the table because we can set the border through CSS which allows us to be more flexible as we don't have to do styling through editing HTML.
for further reading on first-child and last-child CSS selectors:
:first-child
:nth-child(n)
Hope this helps you abit.
Good luck!
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: #0000ff;}
table.blue td {border: 10px solid #ffff00;}
table.blue tr:first-child td:first-child { border-top: none; border-left: none; }
table.blue tr:first-child td:nth-child(2) { border-top: none; border-right: none; }
table.blue tr:nth-child(2) td:first-child { border-bottom: none; border-left: none; }
table.blue tr:nth-child(2) td:nth-child(2) { border-bottom: none; border-right: none; }
</style>
<title>HTML Table</title>
</head>
<body>
<table class="blue" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
</table>
</body>
</html>
</body>
</html>
Here's a way to do it by creating it without tables, and instead layering 2 objects on each other.
What I like about doing it this way like other answers here show as opposed to tables is it shows you a bunch of different powers of css. z-index is a layering style option (-1 for #rectangle places it behind the div). You can play around with the width, height, top, and left values for each to see how they change the placement of the shapes.
#plus-sign {
background:yellow;
width:20px;
height:100px;
position:relative;
margin-left:33px;
}
#plus-sign:before {
background:yellow;
content:"";
width:200px;
height:20px;
position:absolute;
top:40px;
left:-33px;
}
#rectangle {
width:200px;
height:100px;
background-color:blue;
position: absolute;
z-index: -1;
left:-33px;
}
<div id="plus-sign"><span id="rectangle"></span></div>
Nice n' easy Lemon squeezie.
Adjust the border widths evenly for a skinnier or fatter yellow line.
You can also change the colors as your see fit using hexadecimal coloring to more closely match the true Swedish flag colors by replacing "yellow" with a hashtag and then whatever color # in hexadecimal for the true colors. The same can be done with the blue. Hope it helps! ;)
#swedeFlag{
width: 320px;
height: 200px;
border:1px solid black;
}
#swedeFlag .left{
background-color: blue;
height: 40px;
border-bottom: solid yellow 10px;
border-right: solid yellow 10px;
}
#swedeFlag .right{
background-color: blue;
height: 40px;
border-bottom: solid yellow 10px;
border-left: solid yellow 10px;
width: 200px;
}
#swedeFlag .bLeft{
background-color: blue;
height: 40px;
border-top: solid yellow 10px;
border-right: solid yellow 10px;
}
#swedeFlag .bRight{
background-color: blue;
height: 40px;
border-top: solid yellow 10px;
border-left: solid yellow 10px;
width: 200px;
}
<table id="swedeFlag" border="2" width="320px" cellspacing="0">
<tr>
<td class="left">blue</td>
<td class="right">blue</td>
</tr>
<tr>
<td class="bLeft">blue</td>
<td class="bRight">blue</td>
</tr>
</table>
<!--http://www.w3schools.com/css/css_border.asp -->
Related
there is a conflict with style borders in a table.
Tested in Firefox 91.0.2 (64 bit)
It is said that mainly the cell borders should be styled.
It is not that there is no solution by tricking. It is rather the case that there is a conflict.
There are complex hierarchies when styling the borders. The last one takes effect.
General:
table
thead, tbody, tfoot
tr, col
th, td
Special:
border-top, border-right
border-bottom, border-left
The General Hierarchy prevents column-borders from being styled if cell-borders are styled. Only tricks can solve this problem. !important does not solve the problem.
Likewise, row-borders cannot be styled if cell-borders are styled. This is very complex when styling with tr:hover. Correct would be styling with tr:hover td. But there is also a conflict.
There is a trick.
With border-top and border-bottom:
For this only the cell-border-top may be styled. Because these are overwritten by the row-border-bottom (see hierarchy above).
For border-left and border-right:
Only the cell-border-right may be styled for this purpose. Because these are overwritten by the column-border-left (see hierarchy above).
So it is possible to solve the problem with some tricks. However, I am not looking for a trick, but for a solution to the conflict.
In the example the following should work (and at this point don't work without tricks):
cells (th, td): border = 1px solid #fff
column 2 (.col2): border-left, border-right = 1px solid #000
row hover (tr:hover): border-top, border-bottom = 1px solid #000
table {
border-collapse: collapse;
text-align: right;
cursor: default;
}
th {
background: #ccc;
text-align: center;
}
th, td {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
.col0 {
background: #ddd;
}
.col2 {
border-right: 1px solid #000;
border-left: 1px solid #000;
}
tbody tr:hover td {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.c0 {
background: #fff;
}
.c1 {
background: #f8a;
}
.c2 {
background: #b3c;
}
.c3 {
background: #aa6;
}
.c4 {
background: #cf9;
}
.c5 {
background: #9dd;
}
.c6 {
background: #0f8;
}
.c7 {
background: #44f;
}
.c8 {
background: #88b;
}
<table>
<colgroup>
<col class="col0">
<col class="col1">
<col class="col2">
<col class="col3">
<col class="col4">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>COL 1</th>
<th>COL 2</th>
<th>COL 3</th>
<th>COL 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="c0"></td>
<td class="c0"></td>
<td class="c5">8,36</td>
<td class="c4">15,24</td>
</tr>
<tr>
<td>2</td>
<td class="c1">95,35</td>
<td class="c3">36,25</td>
<td class="c6">45,38</td>
<td class="c3">28,73</td>
</tr>
<tr>
<td>3</td>
<td class="c2">37,25</td>
<td class="c4">15,24</td>
<td class="c8">41,25</td>
<td class="c5">8,36</td>
</tr>
<tr>
<td>4</td>
<td class="c7">97,64</td>
<td class="c3">28,73</td>
<td class="c0">36,94</td>
<td class="c0">8,36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>SUM</th>
<th>---</th>
<th>---</th>
<th>---</th>
<th>---</th>
</tr>
</tfoot>
</table>
https://jsfiddle.net/d9kju4sr/1/
Sorry if the title isn't descriptive, I didn't know how to word it. Here's the table in question.
Is it possible for me to remove the white border (the background of the table) from this upper-left cell? I still want this white background between the rest of the cells, but in that upper-left I want it removed. Here's how I want it to look.
My initial thought is to have some ::after pseudo-element on that cell that has some border or padding that can cover that gap between the cell and page background, but I don't know how to do that. Any ideas?
Here's the CSS on this page.
body{
background: #C3DEF2;
font-family: Noto Sans, Roboto, Helvetica, Arial, sans-serif;
}
table{
background: white;
table-layout: fixed;
}
tr:nth-child(even){
background: lightgray;
}
td{
padding: 20px;
}
td.corner{ /* cell in upper-left corner */
background: #C3DEF2;
}
.head1{ /* top row */
text-align: center;
}
.head2{ /* leftmost column */
text-align: right;
}
.head1, .head2{
background: lightblue;
text-transform: uppercase;
font-weight: 600;
}
As requested, here's some of the HTML relating to this part of the table.
<table id="the_table" width="100%">
<tbody>
<tr class="head1">
<td class="corner"></td>
<td>Candidate 1</td>
<td>Candidate 2</td>
</tr>
<tr>
<td class="head2">Education</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Election Reform</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Environment</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Foreign Policy</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Probably more importantly, where does this border come from? It's the white background of the table, but what causes that space between the cells?
Here's a quick solution:
HTML:
<table>
<tr>
<td style="border: 1px inset white;">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
CSS:
table {
margin: 20px;
border-collapse: collapse;
border-spacing: 0;
}
td {
width: 40px;
height: 40px;
border: 1px solid black;
text-align: center;
}
td:hover {
border: 1px solid red;
}
DEMO:
https://liveweave.com/7eIF6k
I have a percentage width on a table and an overflow-y:auto. When scroll appears, the width of the table is shirked.
How can i make the table have the same width (with or without the scroll)
Thank you!
Here is my css:
html,body{height:99%;}
.table1
{ margin: 0;
padding: 0;
border-collapse: collapse;
width:98.1%;
height:5%;
text-align: box-sizing: border-box;
left;table-layout: fixed;
}
.table1 td
{ border-collapse: collapse;
background-color: #EAEAEA;
border: 1px solid lightgrey;
padding-left: 3px;
}
#container
{ overflow-y:auto;
height:20%;
width:100%;left:0;
right:0;
}
.table2
{ margin: 0;
padding: 0;
border-collapse: collapse;
left:0;
right:0;
min-width:98.1%;
box-sizing: border-box;
table-layout: fixed;
}
.table2 tr
{ height:30px;
}
.table2 td
{ margin: 0;
border-collapse: collapse;
border: 1px solid lightgrey;
border-top:none;
border-right: 1px solid lightgrey;
}
And here is my HTML:
<html>
<head>
</head>
<body BGCOLOR="#EAEAEA" TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 >
<table class ="table1">
<colgroup>
<col width="20%"/>
<col width="50%"/>
<col width="30%"/>
</colgroup>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
<div id="container">
<table class="table2" BGCOLOR="WHITE">
<colgroup>
<col width="20%"/>
<col width="50%"/>
<col width="30%"/>
</colgroup>
<tbody>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Try this :
html,body{height:99%;}
.table1
{ margin: 0;
padding: 0;
border-collapse: collapse;
width:calc(100% - 17px);
height:5%;
text-align:left;
}
.table1 td
{ border-collapse: collapse;
background-color: #EAEAEA;
border: 1px solid lightgrey;
padding-left: 3px;
}
#container
{ overflow-y:scroll;
height:20%;
width:100%;left:0;
right:0;
}
.table2
{ margin: 0;
padding: 0;
border-collapse: collapse;
left:0;
right:0;
width:100%;
box-sizing: border-box;
table-layout: fixed;
}
.table2 tr
{ height:30px;
}
.table2 td
{
border: 1px solid lightgrey;
border-top:none;
border-right: 1px solid lightgrey;
}
You can see changes in container where I used width:calc(100% - 17px);. Width of container is decreased for 17px (width of scroller) but I, also, change this overflow-y:scroll;. Now all lines will be, well, in line :)
You don't need border-collapse in .table1 td and .table2 td... and overflow too.
Point is in that width:calc(100% - XYpx), in this case 17px (width of scrollbar)
I hope this is what You need.
There is Fiddle example
Update:
I create two js functions. First one check is there scrollbar in container element and adapt width of him. Second function is just for test, simulating if, in this case, height is changed.
In reality, when You add more rows, which count is more then container height, Your table will adapt. Or on resize browser, too.
In Your case You don't need that second js function called chVl(), it's in fiddle just for test, like I said before.
Try this Fiddle now
remove overflow-y:auto; in #container
like so:
#container
{
height:20%;
width:100%;
left:0;
right:0;
}
Please have a look in the following URL:
"http://jsfiddle.net/7rsx0r4h/"
I want the output like the output table with border and should be look like separate box but don't want to change my html (div layout). Also every box i require some space then another box start.
Thanks,
Manish
demo - http://jsfiddle.net/victor_007/7rsx0r4h/1/
added outline for the first div
change body to the parent id or class
body > div {
outline:1px solid #4679bd;
}
changed border color to white so that it looks like empty space
div div {
border-top: 2px solid white;
}
body > div {
outline: 1px solid #4679bd;
}
div {
width: 496px;
border: 2px solid white;
border-top: 0;
color: #fff;
text-align: center;
font-size: 120%;
background: #4679bd;
}
div div {
font-size: 100%;
width: auto;
border: 0;
border-top: 2px solid white;
line-height: 250%;
}
<p>Divs:</p>
<div>
<div>1
<div>1.1
<div>1.2
<div>1.2.1</div>
</div>
</div>
</div>
<div>2
<div>2.1
<div>2.2
<div>2.2.1</div>
</div>
</div>
</div>
<div>3</div>
<div>4</div>
</div>
<br />
<p>Table:</p>
<table border="1px" width="500px">
<tr>
<td>1</td>
</tr>
<tr>
<td>1.1</td>
</tr>
<tr>
<td>1.2</td>
</tr>
<tr>
<td>1.2.1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>3.1</td>
</tr>
</table>
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>