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
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 am trying to align my table2 to the right using the align="right" attribute of table, however, it's not exactly aligning next to the table1, as shown in the JSFiddle here. Instead it is getting aligned next to the Third Heading which I don't want.
I want table 1 and table 2 to be next to one another and then Heading 3 should come below it.
Another issue, I was trying to resolve is the position of the Heading 2 with the float:right as shown below. It's not going to extreme right.
.enc-data-table {
margin: 0 0 45px 0;
}
.enc-data-table th {
font-size: 12pt;
/*font-weight: 700;*/
padding: 0 5px 5px 0;
text-align: right;
}
.enc-data-table td {
font-size: 12pt;
padding: 0 0 5px 0;
}
h3 {
font-size: 20px;
}
h3 {
width: 50%;
height: 40px;
margin: 0;
padding: 0;
display: inline;
}
hr {
width: 100%
}
<h3>Heading 1</h3>
<h3 style="float:right">Heading 2</h3>
<hr/>
<table class="enc-data-table">
<tr>
<th>Location:</th>
<td >A</td>
</tr>
<tr>
<th>Type:</th>
<td >B</td>
</tr>
<tr>
<th>Dates:</th>
<td >Today</td>
</tr>
<tr>
<th>Reason for visit:</th>
<td >D</td>
</tr>
</table>
<table align= "right" class="enc-data-table">
<tr>
<th > Number:</th>
<td >1111</td>
</tr>
<tr>
<th >Plan Information:</th>
<td >1111</td>
</tr>
<tr>
<th >Date of service:</th>
<td >Today</td>
</tr>
<tr>
<th >Location Description:</th>
<td >USA</td>
</tr>
</table>
<h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
<hr />
Do you want something like this? To set the table alignment properly I recommend setting the th and td elements width separetely!
.enc-data-table th{
width:20%
}
.enc-data-table tr{
width:80%
}
.enc-data-table {
margin: 0 0 45px 0;
width: 50%;
}
.enc-data-table th {
font-size: 12pt;
/*font-weight: 700;*/
padding: 0 5px 5px 0;
text-align: right;
}
.enc-data-table td {
font-size: 12pt;
padding: 0 0 5px 0;
}
h3 {
font-size: 20px;
}
h3 {
width: 50%;
height: 40px;
margin: 0;
padding: 0;
display: inline;
}
hr {
width: 100%
}
/*.enc-data-table th{
width:20%
}
.enc-data-table tr{
width:80%
}*/
<h3>Heading 1</h3>
<h3 style="float:right">Heading 2</h3>
<hr/>
<table class="enc-data-table" align="left">
<tr>
<th>Location:</th>
<td>A</td>
</tr>
<tr>
<th>Type:</th>
<td>B</td>
</tr>
<tr>
<th>Dates:</th>
<td>Today</td>
</tr>
<tr>
<th>Reason for visit:</th>
<td>D</td>
</tr>
</table>
<table align="right" class="enc-data-table">
<tr>
<th> Number:</th>
<td>1111</td>
</tr>
<tr>
<th>Plan Information:</th>
<td>1111</td>
</tr>
<tr>
<th>Date of service:</th>
<td>Today</td>
</tr>
<tr>
<th>Location Description:</th>
<td>USA</td>
</tr>
</table>
<h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
<hr />
I styled my radiobuttons using this tutorial:
a link
It works perfect without a tablelayout! But..
I have a fix tablelayout and I can not change anything on this layout (the layout comes from an old generator). The label and the inputtype (radiobutton) are in separate tables.
Have anyone a idea? How can I style the radiobutton inside the table?
My jsfiddle:
http://jsfiddle.net/ETp5w/
The HTML
<!-- Tablelayout .. is not working!!! -->
<table class="" width="100.0%" cellpadding="0" cellspacing="0">
<colgroup>
<col width="100.0%">
</colgroup>
<tbody>
<tr>
<td class="">
<table cellpadding="0" cellspacing="0" class="">
<tbody>
<tr>
<td>
<input type="radio" name="answer" value="1" class="abc" id="radiobutton1">
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<label for="radiobutton1"><span class="spantext">answer1<br></span></label>
</td>
</tr>
</tbody>
</table>
</td>
<td class="next">
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="">
<tbody>
<tr>
<td>
<input type="radio" name="answer" value="2" class="abc" id="radiobutton2">
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<label for="radiobutton2"><span class="spantext">answer2<br></span></label>
</td>
</tr>
</tbody>
</table>
</td>
<td class="next">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Same code without tables. Works! -->
<input id="answer3" type="radio" name="answer" value="3"></td>
<label for="answer3">answer3</label>
<input id="answer4" type="radio" name="answer" value="4">
<label for="answer4">answer4</label>
The CSS
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
width: 100%;
}
label:checked::before {
background-color: yellow;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: absolute;
left: -15;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
label:hover::before {
background-color: red;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: blue;
font-size: 30px;
text-align: center;
line-height: 18px;
background-color: red;
}
.radio label:before {
border-radius: 8px;
}
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>