I am trying to design a table wherein at mobile view the last two to three columns which are not visible in mobile view should be made collapsible using only CSS and if possible Javascript not jQuery. This is to be done for salesforce web application so no jQuery is allowed. Any help would great.
Tried with this example:
http://codepen.io/anon/pen/QwPVNW
This is somewhat similar but I am unable to break the last two to three columns data and show it below.
body {
font-family: arial;
}
table {
border: 1px solid #ccc;
width: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 1px solid #ddd;
padding: 5px;
}
table th,
table td {
padding: 10px;
text-align: center;
}
table th {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
<table>
<thead>
<tr>
<th>Payment</th>
<th>Issue Date</th>
<th>Amount</th>
<th>Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Payment">Payment #1</td>
<td data-label="Issue Date">02/01/2015</td>
<td data-label="Amount">$2,311</td>
<td data-label="Period">01/01/2015 - 01/31/2015</td>
</tr>
<tr>
<td data-label="Payment">Payment #2</td>
<td data-label="Issue Date">03/01/2015</td>
<td data-label="Amount">$3,211</td>
<td data-label="Period">02/01/2015 - 02/28/2015</td>
</tr>
</tbody>
</table>
Related
How can i make the table responsive with fixed header? means it scrolls when reaches maximum viewpoint. Well, i don't want to scroll the whole page on reaching max viewpoint instead i want table to be scrolled. Also fixed header is important. I tried with box-sizing: border-box; and overflow-x:scroll;but it didn't worked , help me to create a responsive table. Thanks.
table{
border-collapse: separate;
border-spacing: 0;
width: 100%;
box-sizing: border-box;
}
thead,tbody{
box-sizing: border-box;
overflow: auto;
}
th,td{
padding: 6px 15px;
}
th{
background: #42444e;
color: #fff;
text-align: left;
position: static;
top: 50px;
}
tbody tr td img{
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 30px;
height: 30px;
float: none;
display:block;
object-fit: fill;
border-radius: 10%;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
td{
border-right: 1px solid #c6c9cc;
border-bottom: 1px solid #c6c9cc;
}
td:first-child {
border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
background: #eaeaed;
}
tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<table>
<thead>
<tr>
<th>Image</th>
<th>ID</th>
<th>Date</th>
<th>Name</th>
<th>Email</th>
<th>Phone no.</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
</thead>
</table>
I reviewed your codepan and conclude with that, You need to add some CSS property in your CSS file and it's work.
tbody {
height: 200px;
display: inline-block;
overflow: auto;
}
thead tr th{
position: sticky;
top:0;
left:0;
right:0;
}
set position sticky of header
and for table overflow-y set as auto
.fixTable {
overflow-y: auto;
height: 110px;
}
.fixTable thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #060606;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="fixTable">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have got a HTML table built like this:
<html>
<head>
<meta charset="UTF-8">
<style>
body {font-family:'-webkit-system-font', 'HelveticaNeue-Light';}
</style><style type="text/css">
table.sortable, tbody {
counter-reset: sortabletablescope;
vertical-align: middle;
}
table.sortable, thead tr::before {
content: "";
display: table-cell;
vertical-align: middle;
}
table.sortable, tbody tr::before {
content: counter(sortabletablescope);
counter-increment: sortabletablescope;
display: table-cell;
vertical-align: middle;
text-align: center;
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<center>
<table class="sortable" id="myTable">
<tr>
<th>Name</th>
<th>Play</th>
<tr>
<td>1990<br>data1</td><td>data2</td></tr>
<td>2000<br>data3</td><td>data4</td></tr>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</center>
</body>
</html>
I am trying to move the list number so it looks like its part of the table, and not printed before, so there is no whitespace before "Name" in the table header. Like how it looks here (here the numbers are added manually):
<html>
<head>
<meta charset="UTF-8">
<style>
body {font-family:'-webkit-system-font', 'HelveticaNeue-Light';}
</style><style type="text/css">
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<center>
<table class="sortable" id="myTable">
<tr>
<th>Name</th>
<th>Play</th>
<tr>
<td>1. 1990<br>data1</td><td>data2</td></tr>
<td>2. 2000<br>data3</td><td>data4</td></tr>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</center>
</body>
</html>
I have managed to get the number where I want it by using
position: relative; bottom: -6px;
position: relative; left: +25px;
But that doesn't remove the whitespaces before "Name" in the table header. Is this possible to change?
You can use a CSS counter indeed via the :before pseudo-element style like a table-cell: (but there got to be one on each row to preserve the right amount of columns)
Sizing the pseudo-element will allow you to set a negative text-indent on the first th to align it to the far left
example
/* pseudo tr:before for CSS COUNTER for table tr */
tr:before {
content: '';
display: table-cell;
vertical-align: middle;
}
thead th:first-child {
text-indent: -1.5em;
}
tbody {
counter-reset: trs
}
tbody tr:before {
counter-increment: trs;
content: counter(trs)'. ';
width: 1.5em;
text-align: right;
}
/* end css counter */
body {
font-family: '-webkit-system-font', 'HelveticaNeue-Light';
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th,
td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Play</th>
</tr>
</thead>
<tbody>
<tr>
<td>1990<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2000<br>data3</td>
<td>data4</td>
</tr>
<tr>
<td>2010<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2020<br>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
Mind the structure of your table to have no surprise once rendered by browsers.
if it needs to be inside the first cell, then set the counter to the first td and let it float
/* pseudo tr:before for CSS COUNTER for table tr */
tbody {
counter-reset: trs
}
tbody td:first-child:before {
counter-increment: trs;
content: counter(trs)'. ';
float:left
}
/* end css counter */
body {
font-family: '-webkit-system-font', 'HelveticaNeue-Light';
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th,
td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Play</th>
</tr>
</thead>
<tbody>
<tr>
<td>1990<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2000<br>data3</td>
<td>data4</td>
</tr>
<tr>
<td>2010<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2020<br>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
Here is the situation, I have a HTML file with a table, the table gets filled with XML data. The last column (10) got a number in it: 1, 2, 3, 4 or 5. I've got 5 lines of jQuery which look for the number and give the cell with the corresponding number a specific class, this works fine (The cell has 0% opacity because it's not meant to be "shown", but for our means, it works fine like that).
Now the problem is: Column 7 and 8 need to get that class to without the whole column getting it, just the row with the specific number.
I've got a jsfiddle so you can see the code and stuff:
The jQuery:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
Note: The data in the table is just for testing, the real xml will have those number of 1, 2, 3, 4, 5 in like 100 rows in a random order.
EDIT: Got a picture of how it should look:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
td:nth-child(10) {
opacity: 0;
}
.disaster{
background-color: #E45858
}
.high{
background-color: #E87658
}
.average{
background-color: #FEA058
}
.warning{
background-color: #FEC858
}
.information{
background-color: #7498FE
}
/*CSS for main elements*/
div {
max-width: 2600px;
display: block;
}
body {
font-family: Arial, Tahoma, Verdana, sans-serif;
background-color: #FFFFFF;
}
table {
text-align: left;
border-collapse: collapse;
}
th {
font-size: 75%;
font-weight: normal;
color: #768C98;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 2px solid #DCE2E4;
}
td {
font-size: 75%;
color: #1F2C33;
height: 25px;
padding-top: 1px;
padding-bottom: 1px;
border-bottom: 1px solid #EAEEF0;
}
img {
position: absolute; left: -100px;
margin-top: 165px;
transform: rotate(270deg);
}
/*CSS for Hover*/
td:nth-child(1):hover{
text-decoration: underline;
}
td:nth-child(1) {
background-color: #FFFFFF;
}
td:nth-child(2) {
background-color: #FFFFFF;
}
tr.NoHover:hover{
background-color: #FFFFFF;
}
tr:hover {
background-color: #E8F5FF;
}
/*Column specific CSS*/
th.col1 {
text-align: right;
width: 240px;
padding-right: 18px
}
th.col2 {
width: 11px;
padding: none;
}
th.col3 {
text-align: left;
width: 188px;
padding-left: 10px;
}
th.col4 {
text-align: left;
width: 70px;
}
th.col5 {
text-align: left;
width: 77px;
padding-left: 82px;
}
th.col6 {
text-align: left;
width: 430px;
}
th.col7 {
text-align: left;
padding-left: 10px;
width: 497px;
}
th.col8 {
text-align: left;
width: 498px;
}
th.col9 {
text-align: left;
padding-left: 10px;
width: 75px;
}
td:nth-child(1) {
text-align: right;
color: #0274B8;
padding-right: 18px;
border-right: 2px solid #AAD6F0;
border-bottom: none;
}
td:nth-child(2) {
color: white;
border-bottom: none;
width: 11px;
padding: none;
}
td:nth-child(3) {
text-align: left;
text-decoration: underline dotted;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(4) {
text-align: left;
color: #DC0000;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(5) {
text-align: right;
text-decoration: underline dotted;
padding-right: 15px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(6) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(7) {
text-align: left;
text-decoration: underline dotted ;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(8) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(9) {
text-align: left;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<br><br>
<div id="main">
<table id="Table">
<thead>
<tr class="NoHover">
<th class="col1" scope='col' >Time▼</th>
<th class="col2" scope='col' ></th>
<th class="col3" scope='col' >Client</th>
<th class="col4" scope='col' >Status</th>
<th class="col5" scope='col' >Site</th>
<th class="col6" scope='col' >Host</th>
<th class="col7" scope='col' >Problem • Cause</th>
<th class="col8" scope='col' ></th>
<th class="col9" scope='col' >Frequency</th>
<th class="col10" scope='col'></th>
</tr>
</thead>
<tbody id="TableData">
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 1</td>
<td>FAILING</td>
<td>Site 1</td>
<td>PC1</td>
<td>test1</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>1</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 2</td>
<td>FAILING</td>
<td>Site 2</td>
<td>PC2</td>
<td>test2</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>2</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 3</td>
<td>FAILING</td>
<td>Site 3</td>
<td>PC3</td>
<td>test3</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>3</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 4</td>
<td>FAILING</td>
<td>Site 4</td>
<td>PC4</td>
<td>test4</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>4</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 5</td>
<td>FAILING</td>
<td>Site 5</td>
<td>PC5</td>
<td>test5</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</body>
I think you are looking for the .siblings() selector:
$("td:nth-child(10):contains('1')").siblings('td:nth-child(7), td:nth-child(8)').addClass('disaster');
$("td:nth-child(10):contains('2')").siblings('td:nth-child(7), td:nth-child(8)').addClass('high');
$("td:nth-child(10):contains('3')").siblings('td:nth-child(7), td:nth-child(8)').addClass('average');
$("td:nth-child(10):contains('4')").siblings('td:nth-child(7), td:nth-child(8)').addClass('warning');
$("td:nth-child(10):contains('5')").siblings('td:nth-child(7), td:nth-child(8)').addClass('information');
Fiddle: https://jsfiddle.net/8sL86sc7/2/
Something like this maybe? (Fiddle)
$("tr").each(function(index) {
var row = $(this),
lastCol = row.find('td:nth-child(10)'),
appendTo = row.find('td:nth-child(7), td:nth-child(8), td:nth-child(10)');
switch(lastCol.text()) {
case '1':
appendTo.addClass('disaster');
break;
case '2':
appendTo.addClass('high');
break;
case '3':
appendTo.addClass('average');
break;
case '4':
appendTo.addClass('warning');
break;
case '5':
appendTo.addClass('information');
break;
}
});
If there are a lot of rows and you don't need extra stuff to happen exept for the added classes, this could be overkill. the .siblings() selector (as in this answer) could be enough.
Here is my JSfiddle with the table environment: http://jsfiddle.net/pY66Q/
I am having trouble understanding how I can write my JavaScript in such a way that when the element with the given class name of "pmap-program-name-label" is clicked, the click handler runs an expression that will only slideToggle the second child of the that contains the that was clicked. I hope that makes sense.
My HTML:
<table class="pmap-font-clr-drk-grey">
<thead>
<tr>
<th>Audit Program Results</th>
<th>Open</th>
<th>Closed</th>
<th>Overdue</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="pmap-parent-row-odd">
<td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&S Audits - USF Sites</span></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2011 EH&S Audits - USF Sites</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr class="pmap-parent-row-even">
<td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&S Audits - USF Sites</span></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2011 EH&S Audits - USF Sites</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
</tfoot>
My CSS:
table {
width: 100%;
border: 1px #eaeaea solid;
}
th {
width: 10%;
text-align: center;
border-bottom: 4px #007290 solid;
padding: 5px 0;
}
th:first-child {
width: 60%;
text-align: left;
border-bottom: 4px #007290 solid;
padding: 5px 0 5px 20px;
font-family: 'Segoe UI Bold' sans-serif;
font-weight: normal;
}
tr:nth-child(2) {
display: none;
}
td {
width: 10%;
text-align: center;
border-bottom: 1px #eaeaea solid;
border-left: 1px #eaeaea solid;
padding: 0;
line-height: 30px;
}
td:first-child {
width: 60%;
text-align: left;
border-bottom: 1px #eaeaea solid;
padding-left: 38px;
}
td.pmap-program-name-label {
width: 60%;
text-align: left;
border-bottom: 1px #eaeaea solid;
padding: 2px 0 0 10px;
color: #007290;
font-weight: bold;
cursor: pointer;
}
td.pmap-program-name-label span {
padding-left: 10px;
}
tr.pmap-parent-row-odd {
background-color:#FFFFFF;
}
tr.pmap-parent-row-even {
background-color: #F3F4F5;
}
td a {
text-decoration: none;
color: #007290;
font-weight: bold;
}
My JavaScript/jQuery:
$(document).ready(function () {
/*
================================================
Toggles Form Parent/Children Data Fields
================================================
*/
var sectionAnimating = false;
$('.pmap-program-name-label').click(function () {
if (sectionAnimating == false) {
$("tbody").find('tr:nth-child(2)').slideToggle(450, function () {
sectionAnimating = false;
});
sectionAnimating = true;
}
});
});
Here u have code
(document).ready(function () {
/*
================================================
Toggles Form Parent/Children Data Fields
================================================
*/
var sectionAnimating = false;
$('.pmap-program-name-label').click(function () {
if (sectionAnimating == false) {
console.log(this.parentNode.parentNode)
$(this.parentNode.parentNode).find('tr:nth-child(2)').slideToggle(450, function () {
sectionAnimating = false;
});
sectionAnimating = true;
}
});
});
Please look at this JSFiddle as reference.
Using tablesort and the accompanying css, I am trying to get the rows with first/last name to have alternating row colors. Also, I need the rows in the sub-table with date and time to have a white background.
I think part of my problem is that I also have a different class on the first td under the tablesort table. I need that class to kick off the trigger to toggle the hidden row... I just can't seem to get the CSS right.
Here is my HTML
<table class="tablesorter" id="table1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
</tr>
</thead>
<tbody>
<tr class="parent-row">
<td>John</td>
<td>Appleseed</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">
<table class="sub-table" id="SPID" border=1>
<thead>
<th>Date</th>
<th>Time</th>
</thead>
<tbody>
<tr>
<td>12/1/13</td>
<td>4:00AM</td>
</tr>
<tr>
<td>12/1/14</td>
<td>7:00AM</td>
</tr>
<tr>
<td>12/1/15</td>
<td>6:00AM</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="parent-row">
<td>David</td>
<td>Goliath</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">Detail about David</td>
</tr>
<tr class="parent-row">
<td>Amie</td>
<td>Winehouse</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">Detail About Amie</td>
</tr>
</tbody>
And Here is the CSS
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background: url(http://tablesorter.com/themes/blue/desc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown {
background: url(http://tablesorter.com/themes/blue/asc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
table.tablesorter tr.parent-row td {
background: #8dccc8;
}
table.tablesorter tr.parent-row-details td {
background: grey;
}
table.sub-table thead tr th {
background-color: #FFF;
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}
table.sub-table tbody tr td {
background-color: green;
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}
is this something like you wanted?
http://jsfiddle.net/johnboker/q7VL3/116/
added > td
$(document).ready(function () {
$("table.tablesorter tr.parent-row:even > td").css("background-color", "blue");
});
also changed
table.sub-table tbody tr td {
background-color: white; /* made this white */
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}