I need to change td's text color based on odd/even, like this http://jsfiddle.net/N9gEG/
Actually I have a class which do this, but, I want to do from css
<table>
<tr>
<td>RED</td>
<td class="foo">BLUE</td>
<td>RED</td>
<td class="foo">BLUE</td>
</tr>
</table>
For tr odd/even I have the follow code: table tr:nth-child(even).
td {
color: blue;
}
td:nth-child(even) {
color: red;
}
This works because of rule specificity. The more specific CSS rule wins. td without anything else is less specific than td:nth-child(even), so it applies to the odd <td>s automatically.
If your jsFiddle correctly illustrates what you want, you can simply use the :nth-child selectors on the tds rather than the tr:
td { color: blue; }
td:nth-child(odd) { color: red; }
http://jsfiddle.net/N9gEG/2/
Given my limited understanding of your question, I'd suggest:
td:nth-child(even) {
color: blue;
}
td:nth-child(odd) {
color: red;
}
JS Fiddle demo.
Use jquery
.hover {background-color:green !important;}
.odd {background-color:blue}
$("#MyTable tr:odd").addClass("odd");
$("#MyTable tr").mouseover(function() { $(this).addClass("hover"); });
$("#MyTable tr").mouseout(function() { $(this).removeClass("hover"); });
Related
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 5 years ago.
I have a table with 50 entries, some of which have a class of 'event' or 'comment.' Here is what the table row entries look like:
Event, Comment, Event, Comment, Comment, Comment, Event
What I want to do is alternate the row colors of both the 'event' and 'comment' class names separately. Currently what I have is this:
tr.event:nth-child(odd) {
background-color: #000;
}
tr.comment:nth-child(odd) {
background-color: #000;
}
With this code, I get an output of:
Black (event), White (comment), Black (event), White (comment), Black (comment), White (comment), Black (event)
I want the output to be this:
Black (event), Black (comment), White (event), White (comment), Black (comment), White (comment), Black (event)
Any help would be great!
I don't think it is possible with pure css.
A very good reply to the same issue can be found here: Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
What I recommend is: add a new class to each odd element and style that one accordingly.
So you will have
.comment
.event
.comment.odd
.event.odd
.event
.event.odd
.comment
Etc
Otherwise, you can do it using js. But the extra class method should be good enough.
You are trying to represent what is essentially hierarchical data with a non-hierarchical HTML structure. nth-child refers to the order of the child within its parent, not within all children with some shared class. So basically, you can't do this in CSS.
Try structuring your HTML like this if you can:
<div>
<div class="event">
<div class="comment"></div>
</div>
<div class="event">
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
</div>
<div class="event">
</div>
</div>
Now you can style this with
.event:nth-child(odd) { color: white; }
.event:nth-child(even) { color: black; }
.comment:nth-child(odd) { color: white; }
.comment:nth-child(even) { color: black; }
Since you seem to want to start the comments with the same color as the event it is part of, you would need to do:
.event:nth-child(odd) { color: white; }
.event:nth-child(odd) .comment:nth-child(odd) { color: white; }
.event:nth-child(odd) .comment:nth-child(even) { color: black; }
.event:nth-child(even) { color: black; }
.event:nth-child(even) .comment:nth-child(odd) { color: black; }
.event:nth-child(even) .comment:nth-child(even) { color: white; }
The above uses div elements. But if you really want to do this with a table, you could try using the following HTML, then use the same kind of logic as above:
<table>
<thead><tr><td>Event</td></tr></thead>
<tbody>
<tr><td>Comment</td></tr>
</tbody>
<thead <tr><td>Event</td></tr></thead>
<tbody>
<tr><td>Comment</td></tr>
<tr><td>Comment</td></tr>
<tr><td>Comment</td></tr>
</tbody>
<thead><tr><td>Event</td></tr></thead>
</table>
Then write:
thead:nth-of-type(odd) { color: white; }
tbody:nth-of-type(even) tr:nth-child(odd) { color: white; }
tbody:nth-of-type(odd) tr:nth-child(event) { color: black; }
thead:nth-of-type(even) { color: black; }
tbody:nth-of-type(even) tr:nth-child(odd) { color: black; }
tbody:nth-of-type(odd) tr:nth-child(event) { color: white; }
It is impossible with pure CSS, you will have to use jQuery to add a class (or the style directly if you wish).
jQuery's indexing starts a 0, so what it considers even, we consider odd.
I've added the color green so that you can see what's in the cell.
$('table').each(function() {
$('tr.comment:even').addClass('odd');
$('tr.event:even').addClass('odd');
});
tr.comment.odd {
background-color: #000;
}
tr.event.odd {
background-color: #000;
}
table {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="event">
<td>event</td>
</tr>
<tr class="comment">
<td>comment</td>
</tr>
<tr class="event">
<td>event</td>
</tr>
<tr class="comment">
<td>comment</td>
</tr>
<tr class="comment">
<td>comment</td>
</tr>
<tr class="comment">
<td>comment</td>
</tr>
<tr class="event">
<td>event</td>
</tr>
</table>
I have following CSS style to show table data in proper format , but I want to display alternate background of table header ( th ) in different color...
How can I modify only below CSS to achieve the same
i.e every TH3,TH5 should have blue background ( except the first one TH1 - it will have default background of red )
while TH2,TH4,TH6 should have yellow background.
I have already tried nth child selector and somewhere I read about th+th both ways are not working.
<style type="text/css">
table {
/*...all table attributes like fontsize etc*/
font-size:11px;
color:#333333;
}
table th {
/*...all th attributes like padding etc*/
background-color:#d4e3e5;
padding: 8px;
}
table td {
/*...all td attributes like padding etc*/
padding: 8px;
}
</style>
Thanks for all reespons but nth child selector is not working and I have alerdy tried that. Is there any basic way to modify the CSS and achieve the same?
fiddle
nth-child is working.
th:nth-child(odd) {
background-color:red; // Replace it with your desired color
}
th:nth-child(even) {
background-color: yellow;
}
If you have problems furhter, post your HTML and CSS.
You can also try this
table th:odd {
background-color:#000; //Replace it with your desired color
}
table th:odd {
background-color:#f00; //Replace it with your desired color
}
Or you can try selecting of nth element.
th:nth-child(n) {
background-color:red; // Replace it with your desired color
}
try this.
th:nth-child(odd) {
background-color:blue;
}
th:nth-child(even) {
background-color:yellow;
}
<!DOCTYPE html>
<html>
<head>
<style>
th:nth-child(odd){ background-color:blue; }
th:nth-child(even){ background-color:yellow; }
</style>
</head>
<body>
<table>
<tr>
<th>heading</th>
<th>heading1</th>
</tr>
<tr>
<td>xxx</td>
<td>yyy</td>
</tr>
<tr>
<td>xxx1</td>
<td>yyy1</td>
</tr>
</table>
</body>
</html>
I have a table with n rows. On these n rows I need to set some CSS style, following this rules:
the CSS should apply only on odd rows
the CSS should NOT apply on the first and the last row (or on those rows with .excludeme class)
the CSS should apply only on visible rows
HTML
<table>
<tr class="excludeme"><td>first</td></tr>
<tr><td>Hello</td></tr>
<tr><td>Hello</td></tr>
<tr class="showhide"><td>show/hide</td></tr>
<tr><td>Hello</td></tr>
<tr><td>Hello</td></tr>
<tr><td>Hello</td></tr>
<tr><td>Hello</td></tr>
<tr class="showhide"><td>show/hide</td></tr>
<tr class="showhide"><td>show/hide</td></tr>
<tr><td>Hello</td></tr>
<tr class="excludeme"><td>last</td></tr>
</table>
CSS
.showhide{
display: none;
}
table tr:nth-child(odd):not(.excludeme){
background: orange;
}
JS
//--- #test is a button
$("#test").on("click", function(){
$(".showhide").toggle();
});
you can find a fiddle HERE
As you can see, when some rows are hidde, the even/odd colouring is not respected. I tried this selector
table tr:nth-child(odd):not(.excludeme):visible{
....
}
but is not working.. Is it possible to accomplish this only using CSS?
Thank you
$(document).ready(function(){
$("#test").on("click", function(){
$(".showhide").toggle();
if($(element).is(":visible")){
// color odd rows
}
});
});
You have to verify the visibility of elements before coloring them. Only color the visible odd elements, not all elements in DOM (visible or not).
I hope that helps, have a good day :)
you can use following CSS(use of gradient CSS) without changing any other code:
* {
margin: 0;
padding: 0;
}
table {
padding: 0;
margin: 0;
border: none;
width: 100%;
background-image:
repeating-linear-gradient(white, white 1.2em, hotpink 1.2em, hotpink 2.4em);
border-collapse: collapse;
}
td,tr {
border: none;
padding: 0 5px;
line-height: 1.2em;
margin: 0;
border-collapse: collapse;
}
.showhide {
display: none;
}
.excludeme {
background: white;
}
Is it possible to style alternate table rows without defining classes on alternate <tr> tags?
With the following table, can CSS define alternate row styles WITHOUT having to give the alternate rows the class "row1/row2"? row1 can be default, so row2 is the issue.
<style>
.altTable td { }
.altTable .row2 td { background-color: #EEE; }
</style>
<table class="altTable">
<thead><tr><td></td></tr></thead>
<tbody>
<tr><td></td></tr>
<tr class="row2"><td></td></tr>
<tr><td></td></tr>
<tr class="row2"><td></td></tr>
</tbody>
</table>
tr:nth-child(even) { background: #FFF; }
tr:nth-child(odd) { background: #EEE; }
Does not work in IE, but it's a purely presentational thing, the content will work fine anyway, so I don't think it's a huge issue -- depending on the % of regular IE users on your site.
Yes! You can do it with pure CSS and no classes on browsers that support the "+" selector of CSS:
.altTable tr td,
.altTable tr+tr+tr td,
.altTable tr+tr+tr+tr+tr td { background-color: #EEE; }
.altTable tr+tr td,
.altTable tr+tr+tr+tr td,
.altTable tr+tr+tr+tr+tr+tr td{ background-color: #fff; }
Probably not the best approach, but doable.
If you don't mind a little Javascript, jQuery gives it to you much concisely:
$('.altTable tr:odd').addClass('odd');
Give a class of row2 on tbody and then style your alternate rows with class row1. Other rows will inherit the class row2 from the tbody.
<style>
.row1 { color: red }
.row2 { color: blue }
</style>
<table class="altTable">
<thead><tr><td></td></tr></thead>
<tbody class="row2">
<tr class="row1"><td>row 1</td></tr>
<tr><td>row 2</td></tr>
<tr class="row1"><td>row 1</td></tr>
<tr><td>row 2</td></tr>
</tbody>
</table>
I created a table without borders styling and I want it to underline a row on hover. However, I am getting pretty odd behaviour. When I move mouse over from upside down, nothing happens. In opposite direction, all touched rows get underlined and stay that way until I move mouse over in some other direction. I am pretty confused by this. I wanted to stay out of jquery for simplicity, but with jquery I get the same result. Here is the code..
<div class="information" >
<table id="summary" >
<%
foreach (KeyValuePair<long, float> pair in sums)
{ %>
<tr>
<td class="left" >Automat id: <%= pair.Key%></td>
<td class="right" ><%= pair.Value%></td>
</tr>
<% } %>
</table>
</div>
And the css applied to this div:
table
{
border-collapse: collapse;
border-spacing: 0;
text-align: center;
margin-top:.5em;
}
div.information
{
margin:1em 0;
padding:1em;
font-weight:bold;
text-align: center;
color:#C80;
background-color:#FF9;
border:1px solid #C80;
}
#summary
{
width: 715px;
margin-bottom: 5px;
}
.left
{
text-align: left;
}
.right
{
text-align: right;
}
And the faulty part:
#summary tr:hover
{
border-bottom: dotted 1px gray;
}
Anyone sees an error? Another way? And sorry for the long post.
I know this is old, but it showed up in a Google Search of mine. Browser support for styling tr is pathetic at best. Your styles need to be on the tds, like:
#summary tr:hover td {
border-bottom:solid 1px #FF9;
}
Try using JavaScript onmouseover and onmouseout events. In this events just apply and un-apply your css class.
This looks like a bug in chrome. It works well on Firefox, and not at all in IE.
(IE doesn't support :hover, border-spacing, border for collapsed <tr>s, it goes on and on...)
I've found a simple workaround for Chrome, however - simply add a bottom border for all <tr>s:
#summary tr {
border-bottom:solid 1px #FF9;
}
This will also keep your rows from changing heights and jiggle.
Ok, there seems to be a bug in the way the :hover pseudoselector is being applied to "tr". Change selector to "#summary td:hover {}". It should work.
One note to add, that does not seem too widely known, unlike every other browser tested, chrome redraws the ENTIRE table when applying styles on tr:hover. This may have been fixed in newer versions of chrome
This is VERY critical when you have a large table, chrome lags very badly.
Also, I would highly recommend having a border of the same width set on the TDs before hover, and simply match the BG color, vertical shifts like that are horrible UX. I tried reducing the padding inside the TDs by 1px to account for the border, but had some weird results (yet another reason to hate tables)
This is the way to define Script using JQuery to change row style (you should define your css).
CSS:
.hovercs {
cursor: pointer;
background-color: #70C9C4;
}
JavaScript:
$(function () {
$(document).on({
mouseenter: function () {
$(this).addClass('hovercs');
},
mouseleave: function () {
$(this).removeClass('hovercs');
}
}, 'tbody tr');
});
$(function () {
$(document).on({
mouseenter: function () {
$(this).addClass('hovercs');
},
mouseleave: function () {
$(this).removeClass('hovercs');
}
}, 'tbody tr');
});
.hovercs {
cursor: pointer;
background-color: #70C9C4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>Vipin Yadav</td>
<td>Frankfrut</td>
<td>Germany</td>
</tr>
<tr>
<td>Ramesh</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Reetika</td>
<td>Melbourne</td>
<td>Austria</td>
</tr>
</table>
</body>
</html>
$(function () {
$(document).on({
mouseenter: function () {
$(this).addClass('hovercs');
},
mouseleave: function () {
$(this).removeClass('hovercs');
}
}, 'tbody tr');
});