Is there any changes regarding this questions Conditional alternative table row styles since HTML5 came in?
Here is a copy of original question:
Is it possible to style alternate table rows without defining classes on alternate 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>
CSS3 supports the "nth-child" property on the tr tag. Something like the following should work:
tr:nth-child(odd) { background-color: white; }
tr:nth-child(even) { background-color: green; }
Jacob R's solution to your original posting still applies.
Related
I have two styles, one which is at element level 'td' and another which is at class level '.specialTable td'. And I've run into some problems as the class level style is inheriting all the 'td' style properties if I have not specified them again.
I have a CSS style
td
{
background-color:black;
}
and then I have
.specialTable tr:nth-child(even) {
background-color: white;
}
and
.specialTable td
{
background-color:none;
}
What happens here is that even though I've asked.specialTable td to have no background, it inherits the black background from element style 'td' and this causes my element style 'tr' to be blocked out, because cells are on top of rows.
I am trying to set alternating row style to my table. Please help me with how I can stop the original 'td' element style from getting in the way.
Here is the fiddle:
http://jsfiddle.net/PIyer/phADs/1/
you have a type in your css, but im not sure if that is the problem
specialTable tr:nth-child(even) {
background-color: white;
}
should be
.specialTable tr:nth-child(even) {
background-color: white;
}
aslso background-color:none is not valid css , maybee background-color:transparent
none is not a valid property for the background color. Try this:
.specialTable tr {
background-color: black;
}
.specialTable tr:nth-child(even) {
background-color: white;
}
Or you might use in your example just
.specialTable td
{
background-color: transparent;
}
This should let the white shine through.
You could simplify things, by using basic CSS overriding.
Let's say you have this:
<table class="specialTable">
<tr>
<td>This is an odd row</td>
</tr>
<tr>
<td>This is an even row</td>
</tr>
<tr>
<td>This is an odd row</td>
</tr>
<tr>
<td>This is an even row</td>
</tr>
</table>
And your default <td> style is this:
td {
background-color:black;
color: #FFF;
}
To make alternating (zebra) styling to .specialTable, you can simply do this:
.specialTable tr:nth-child(even) td {
background-color: blue;
}
This will override the original CSS defintion for <td> for all <td> tags within an even <tr> tag.
Check out a working example here: http://jsfiddle.net/rh5vV/
It's important to note that the nth-child sudo selector does not work in versions of IE8 and lower, so you may want to apply a class of .even to your even <tr> tags.
Try this out
.specialTable tr td {
background-color:transparent;
}
using background none is incorrect, use transparent instead
http://jsfiddle.net/RBY2v/1/
You can use background-color:transparent; or depending on background:none;:
.specialTable td {
background-color:transparent;
}
I have a few tables of which I would only like to target the even and odd rows:
<table class="record">
<tbody>
<tr>
<th scope="col">Score</th>
<th scope="col">Time</th>
</tr>
<tr>
<td>A</td>
<td>1.20</td>
</tr>
<tr>
<td>B</td>
<td>1.35</td>
</tr>
<tr>
<td>C</td>
<td>1.39</td>
</tr>
</tbody>
</table>
I tried to use the following code which I found online, but it works but on all of the tables around the site:
tr:nth-child(even) { background: #666; }
tr:nth-child(odd) { background: #CCC; }
Any suggestions how can I target on tables only with a class of "record" ?
Thank you for your suggestions.
Edit:
And what if this tables is under another table as td? :)
First things first: your question title implies/states that you want to use an id, whereas in your question-code you're using a class, to select the relevant table element. These are not equivalent; an element may have only one id, but multiple classes. That said, to use a class, the posted answer has you covered.
If, on the other hand, you want to use an id (as stated in your title), then replace .record with #idOfTable (and remember to pass an id to your HTML: <table id="idOfTable"><!-- other stuff --></table>).
You can, of course, combine an id with a class selector:
Just pass the ancestor as part of the selector:
.record tr:nth-child(even) {background: #666;}
.record tr:nth-child(odd) {background: #CCC;}
JS Fiddle demo.
On the grounds you may only want this to work within the tbody, you can also pass that as part of the selector:
.record tbody tr:nth-child(even) {background: #666;}
.record tbody tr:nth-child(odd) {background: #CCC;}
JS Fiddle demo.
You can, of course, combine an id with a class selector:
#idOfTable.classNameOfTable {
/* CSS */
}
Just add table.record before the CSS code you posted like so:
table.record tr:nth-child(even) { background: #666; }
table.record tr:nth-child(odd) { background: #CCC; }
The table part is to delimit this only to tables as there might be other elements with the class record and you don't this to interfere with them.
The .record just specifies the class (<elem>.<class> is the syntax and <elem> is not necessary).
And the nesting is simple to understand too: it looks for matching elements within the outer elements. Here is the relevant W3S documentation.
Using css selector how am i supposed to write a selector so that only table rows that have data display cursor as pointer. I tried below but nope
table tbody tr:not(tr>th)
is this cross browser and works event in IE6?
That is not a valid CSS selector; you can't put combinators inside :not().
Your best bet is to put header rows (i.e. <tr> elements that contain <th> elements) inside a <thead>, leave the rest of the rows in your table's <tbody>, and simply use this:
table tbody tr {
cursor: pointer;
}
If you can't modify your HTML, it's not possible with CSS selectors alone, especially not with your requirement of supporting IE6. Use JavaScript instead; here's an obligatory jQuery example:
$('table tbody tr:not(:has(th))').css('cursor', 'pointer');
Assuming that your header row will always be the first row, you could do this:
table tr:not(:first-child) {
background:red;
}
This selects all tr elements except the first-child (as in, the first of the matched elements).
This does not work in IE6 or any other version of IE except IE9.
But yes, if you do require IE6 support, Javascript must be used.
you can do it using <thead> tag.
In my case table looks like:
<table>
<thead> <tr><th>... </thead>
<tbody> <tr><td>... </tbody>
</table>
this will be applied for all tables:
tbody tr{
background: yellow;
}
this is only for tables which has header:
thead+tbody tr{
background: red;
}
Basically I tried solutions above but in my case I wrote something different to make it works. I don't know if it's better to use :hover or not for cursor.
table tbody>tr:hover {
cursor: pointer;
}
In my case table is coded like that
<table>
<thead>
<tr>...</tr>
....
</thead>
<tbody>
<tr>...</tr>
...
</table>
At all, I wanted to add style to entire line and not tr themselves
I have this table with the following CSS formatting:
<table cellspacing="2">
<tbody>
<tr>
<th>Name</th>
<th>Area</th>
</tr>
<tr>
<td>${it.conference}</td>
<td>${it.accepted}</td>
</tr>
</tbody>
</table>
And CSS:
table {
padding-left: 10px;
width:90%;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
}
th, td {
padding:5px 10px;
}
th {
color:#666666;
border-top:2px solid #b7ddf2;
background-color:#ebf4fb;
}
How can i apply individual css modifications for each line (for example, I would like to change the color of 'Name', without messing up with the other lines formatting, which means, only modify that one. Is that possible to do?
Are you looking for something similar to the nth-child CSS pseudo-class?
If you want a more fine grain control over each individual one you might want to consider applying classes to them and styling them differently.
Edit: Here are a few examples of nth-child.
With a CSS only method you'll need to add some class to the line you would like to style, like this:
<table cellspacing="2">
<tbody><tr>
<th class="color1">Name</th>
<th>Area</th>
</tr>
<td>${it.conference}</td>
<td>${it.accepted}</td>
</tr></tbody>
</table>
and then style it:
.color1 {
background-color: (somecolor);
}
To style "Even" & "Odd" rows then use CSS3
like:
tr:nth-child(odd){
background:#999;}
tr:nth-child(even){
background:#f5f5f5;}
If you can get away without support for IE 7 and 8, you can do...
th:nth-of-type(1) {
color: #c00;
}
Otherwise, add a class such as th class="whatever" and then...
th.whatever {
color: #c00;
}
See a live demo:
http://jsfiddle.net/GFPgB/
If you want to apply CSS style based on the content of the element, that is not possible with CSS. If on the other hand you want to apply CSS styles based on their position, you can use the :nth-child(N) pseudo classes. For example
th:nth-child(1) /*for name*/
{
color: blue;
}
th:nth-child(2) /*for area*/
{
color: red;
}
apply a class to whatever element you want, and CSS style it. http://jsfiddle.net/robx/wzXAJ/
IE: apply <th class="name">Name</th>.
I know this is an old answer, but I made a fun example in Jquery, and maybe it will help somebody with their question.
JSFIDDLE
It'll get all <p> elements from the document and will loop through them, as jquery does that, it will add a CSS style to every <p> element on the page.
I want to give good background effect to rows using this css
tr:hover td{background-color:#ddd; }
imagine a table inside a table,
naturally all td's inside, also effected by this css. How can I prevent?
<table
<tr
<td -->color change is good
<tr
<td
<table
<tr
<td --> color change is bad
I tried using
form>table>tr:hover td still same
form>table>tr:hover>td not working at all
thanks for help
Use this to style only your outer tds on hover.
form > table > tbody > tr:hover > td {
background-color: #ddd;
}
Notice the tbody selector. See this answer for why it's needed.
Use a second selector:
tr:hover table td { background-color: black; } /*change to default*/