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>
Related
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 am unable to create the HTML code for this table. How to do that?enter image description here
The error you are probably running in to is that "E" needs to be on its own row... There are certainly other ways to do this (including not using tables). But to answer the question you posed:
<table border=1>
<tr>
<td>A</td><td rowspan=2>D</td>
</tr>
<tr>
<td rowspan=2>B</td>
</tr>
<tr>
<td rowspan=2>E</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
table {
border: 2px solid ;
border-collapse: collapse;
}
td {
border: 2px solid;
padding: 20px;
}
<table>
<tr>
<td rowspan="2">A</td> <td rowspan="3">D</td>
</tr>
<tr>
<!-- <td rowspan="2">A</td> --> <!-- <td rowspan="3">D</td> -->
</tr>
<tr>
<td rowspan="2">B</td> <!-- <td rowspan="3">D</td> -->
</tr>
<tr>
<!-- <td rowspan="2">B</td> --> <td rowspan="3">E</td>
</tr>
<tr>
<td rowspan="2">C</td> <!-- <td rowspan="3">E</td> -->
</tr>
<tr>
<!-- <td rowspan="2">C</td> --> <!-- <td rowspan="3">E</td> -->
</tr>
</table>
Or with grid
.grid {
display: inline-grid;
grid-template-areas:
"A D"
"A D"
"B D"
"B E"
"C E"
"C E"
;
border-style: solid;
border-width: 2px 0 0 2px;
}
.grid .a,
.grid .b,
.grid .c,
.grid .d,
.grid .e {
padding: 20px;
border-style: solid;
border-width: 0 2px 2px 0;
display: flex;
align-items: center;
}
.grid .a {
grid-area: A;
}
.grid .b {
grid-area: B;
}
.grid .c {
grid-area: C;
}
.grid .d {
grid-area: D;
}
.grid .e {
grid-area: E;
}
<div class="grid">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
</div>
Im not sure why you are using Table for this. Any way we can achieve this by following HTML
<!DOCTYPE html>
<html>
<head>
<style>
td {
width: 100px;
height: 100px;
}
table.child tr,
table.child tr td {
padding: 0px;
}
table.child,
table.child tr {
border: 1px solid #fff;
}
table.child tr td {
border: none;
}
table.child,
table.child tr,
table.child tr td {
border: none;
border-collapse: collapse;
}
table.base,
table.base tr,
table.base tr td {
border-collapse: collapse;
}
table.base tbody tr,
table.base tbody tr td {
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<h2>Table</h2>
<table border=1 class="base">
<tr>
<td>
A
</td>
<td rowspan=3 style="padding: 0">
<table border=1 class="child">
<tr>
<td style="border-bottom: 1px solid">
D
</td>
</tr>
<tr>
<td>
E
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign=middle>
B
</td>
</tr>
<tr>
<td>
C
</td>
</tr>
</table>
</body>
</html>
I think it will help you
HTML
<table>
<tr>
<td rowspan="2">A</td>
<td rowspan="3">D</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2">B</td>
</tr>
<tr>
<td rowspan="3">E</td>
</tr>
<tr>
<td rowspan="2">C</td>
</tr>
<tr></tr>
</table>
CSS
<style>
table {
width:55%;
}
table, th, td {
border: 3px solid black;
border-collapse: collapse;
}
th, td {
padding: 45px 10px;
text-align: center;
font-weight: 600;
font-size: 20px;
}
</style>
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*/
I tried tr:nth element ... not working
Below is my jsp and css
jsp fetches 2 lists from java class
Includes a validation if list is empty and then displays values
data-grid is table class
<table class="data-grid" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th colspan="6">Excesses to be actioned</th>
</tr>
</thead>
<tr class="header">
<th>Excess ID</th>
<th>Date</th>
<th>Client</th>
<th>Product</th>
<th>Amount</th>
<th>DA</th>
</tr>
<tbody id="tbNa">
<c:choose>
<c:when
test="${empty actionBean.excessList.newActiveCustomerExcessUIList}">
<tr>
<td colspan="6" align="center"><font color="red">No
data available for Active Excess List</font></td>
</tr>
</c:when>
<c:otherwise>
<c:forEach
items="${actionBean.excessList.newActiveCustomerExcessUIList}"
var="customerExcess" varStatus="loop">
<c:set var="clientName" value="${customerExcess.clientName}"
scope="page"></c:set>
<c:set var="ultimateParent"
value="${customerExcess.ultimateParent}" scope="page"></c:set>
<c:set var="cif" value="${customerExcess.cif}" scope="page"></c:set>
<c:forEach items="${customerExcess.excessList}" var="excess">
<tr>
<td><c:out value="${excess.excessId }"></c:out></td>
<td><c:out value="${excess.openDate }"></c:out></td>
<td><a href="#" onclick="openClientExcessPage('${cif}');"><c:out
value="${clientName}"></c:out></a></td>
<td><c:out value="${ultimateParent}"></c:out></td>
<td><c:out value="${excess.excessAmount }"></c:out></td>
<td><c:out value="${excess.excessDa}"></c:out></td>
</tr>
</c:forEach>
</c:forEach>
</c:otherwise>
</c:choose>
<c:choose>
<c:when
test="${empty actionBean.excessList.approvedCustomerExcessUIList}">
<tr>
<td colspan="6" align="center"><font color="red">No
data available for Approved Excess List</font></td>
</tr>
</c:when>
<c:otherwise>
<c:forEach
items="${actionBean.excessList.approvedCustomerExcessUIList}"
var="customerExcess">
<c:set var="clientName" value="${customerExcess.clientName}"
scope="page"></c:set>
<c:set var="ultimateParent"
value="${customerExcess.ultimateParent}" scope="page"></c:set>
<c:forEach items="${customerExcess.excessList}" var="excess">
<tr>
<td><c:out value="${excess.excessId }"></c:out></td>
<td><c:out value="${excess.openDate }"></c:out></td>
<td><a href="#" onclick="openClientExcessPage('${cif}');"><c:out
value="${clientName}"></c:out></a></td>
<td><c:out value="${ultimateParent}"></c:out></td>
<td><c:out value="${excess.excessAmount }"></c:out></td>
<td><c:out value="${excess.excessDa }"></c:out></td>
</tr>
</c:forEach>
</c:forEach>
</c:otherwise>
</c:choose>
</tbody>
</table>
Data-grid is table class...below is the css written for the table
I don't want to change row color..I need to change font color of the data in the even rows
.data-grid {
margin: 0px;
padding: 0px;
width : 60%;
height : 40%;
padding-top: 10%;
padding-left: 15%;
white-space: nowrap;
}
.data-grid select {
padding: 3px 0px;
border: 1px solid #DCDCDC;
}
.data-grid td {
font-size: 11px;
color: #000000;
background-color: white;
border: 0px;
border-left: 1px;
border-bottom: 1px;
border-style: solid;
border-color: #DBE5F1;
padding: 5px;
}
.data-grid thead {
color: #004080;
font-size: 12px;
font-weight: normal;
border-color: #FFF;
vertical-align: text-top;
background-color: #C3C3C3;
height: 20px;
padding: 2px 5px;
}
.data-grid .header th {
color: #002577;
font-size: 11px;
font-weight: bold;
border-color: #FFF;
text-align: center;
vertical-align: text-top;
background-color: #D5E0E6;
}
.data-grid tr:nth-child(even) {color: #CCC}
.data-grid tr:nth-child(odd) {color: #FFF}
Check this example
<!DOCTYPE html>
<html>
<head>
<style>
.myclass1 tr:nth-child(odd)
{
background:#ff0000;
}
.myclass1 tr:nth-child(even)
{
background:#0000ff;
}
.myclass2 tr:nth-child(odd)
{
background:#00ff00;
}
.myclass2 tr:nth-child(even)
{
background:#ff0000;
}
</style>
</head>
<body>
<table width="100%" border=1 class="myclass1">
<tr><td>aaaa</td></tr>
<tr><td>bbbb</td></tr>
<tr><td>cccc</td></tr>
<tr><td>dddd</td></tr>
</table>
<table width="100%" border=1 class="myclass2">
<tr><td>aaaa</td></tr>
<tr><td>bbbb</td></tr>
<tr><td>cccc</td></tr>
<tr><td>dddd</td></tr>
</table>
</body>
</html>
tr:nth-child(even) {background-color: #f2f2f2;color:red}
tr:nth-child(odd) {background-color: #f2f2f2;color:blue}
Here is the JSFiddle