I'm trying to highlight (change background color) of the entire row when the mouse is hovering on a table row. I searched through the Net and it should be working, but it doesn't. I'm displaying it on Chrome.
<table class="list1">
<tr>
<td>1</td><td>a</td>
</tr>
<tr>
<td>2</td><td>b</td>
</tr>
<tr>
<td>3</td><td>c</td>
</tr>
</table>
my css:
.list1 tr:hover{
background-color:#fefefe;
}
The correct css should be:
.list1 tr:hover td{
background-color:#fefefe;
}
//--this css for the td keeps overriding the one i showed earlier
.list1 td{
background-color:#ccc000;
}
Thanks for the feedback guys!
Your best bet is to use
table.YourClass tr:hover td {
background-color: #FEFEFE;
}
Rows aren't fully support for background color but cells are, using the combination of :hover and the child element will yield the results you need.
You need to use <!DOCTYPE html> for :hover to work with anything other than the <a> tag. Try adding that to the top of your HTML.
try
.list1 tr:hover td{
background-color:#fefefe;
}
tr:hover doesn't work in old browsers.
You can use jQuery for this:
.tr-hover
{
background-color:#fefefe;
}
$('.list1 tr').hover(function()
{
$(this).addClass('tr-hover');
},function()
{
$(this).removeClass('tr-hover');
});
You can simply use background CSS property as follows:
tr:hover{
background: #F1F1F2;
}
Working example
Try it:
css code:
.list1 tr:hover td {
background-color:#fefefe;
}
Recently I had a similar problem, the problem was I was using background-color, use background: {anyColor}
example:
tr::hover td {background: red;}
This works like charm!
Works fine for me... The tr:hover should work. Probably it won't work because:
The background color you have set is very light. You don't happen to use this on a white background, do you?
Your <td> tags are not closed properly.
Please note that hovering a <tr> will not work in older browsers.
Use !important:
.list1 tr:hover{
background:#fefefe !important;
}
Like #wesley says, you have not closed your first <td>. You opened it two times.
<table class="list1">
<tr>
<td>1</td><td>a</td>
</tr>
<tr>
<td>2</td><td>b</td>
</tr>
<tr>
<td>3</td><td>c</td>
</tr>
</table>
CSS:
.list1 tr:hover{
background-color:#fefefe;
}
There is no JavaScript needed, just complete your HTML code
I had the same problem.
I found that if I use a DOCTYPE like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
it didn't work. But if I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
it did work.
Also try thistr:hover td {color: aqua;}
`
Also, it matters in which order the tags in your CSS file are styled. Make sure that your tr:nth-child and tr:hover td are described before table's td and th. Like so:
#tblServers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#tblServers tr:nth-child(even){background-color: #f2f2f2;}
#tblServers tr:hover td{background-color: #c1c4c8;}
#tblServers td, #tblServers th {
border: 1px solid #ddd;
padding: 8px;
}
#tblServers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4a536e;
color: white;
}
Related
I have a simple table:
<table class="table table-condensed table-striped">
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
<tr>
<td>teste1</td>
<td>teste2</td>
</tr>
</table>
With a custom CSS:
tr:first-child {
color: #696969;
background-color: black; !important;
}
The color is applied, but the background-color, isn't. Why? With last-child the background-color works. Thanks.
Update: If I remove the table-striped it works. But I need to keep it.
Update2: table-striped Bootstrap CSS:
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
Found it, it's selector problem,
The selector B3 using is more specific, now, place your css as sequence as below.
Example:
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
and add this css in the custom.css
.table-striped > tbody > tr:first-child > td,
.table-striped > tbody > tr:first-child > th {
color: #696969;
background-color:#000;
}
I've tested and the result is what you need.
http://jsfiddle.net/TAp7T/1/
Change
background-color: black; !important;
To
background-color: black !important;
you don't need important just add more classes or an id to the selector to make it work like this and apply your style to the td.
table.table-condensed.table.table-striped tr:first-child td{
color: #696969;
background-color: black;
}
fiddle here
Irrespective of !important, the CSS style gets applied to first-child or last-child. See in JSFiddle first for first-child and JSFiddle last for last-child. Probably, you have shown only a part of your project, so we can only analyze based on the info you have given. The code really applies the background-color to any child.
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 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 have a variable number of table rows (n), and I would like the border bottom to apply to rows 0..(n-1)
how do I do that?
You have two options: (1) adding a specialized class in the HTML to the last row; or (2) using the :last-child pseudo class in your CSS.
Option 1: Specialized Class
If you can apply classes to your HTML, you can add a specialized class to the final row. If your markup is being generated by a server-side script (eg. a PHP script), you will need to edit that script to add similar markup.
HTML:
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr class="last">
<td>
</td>
</tr>
</table>
CSS:
table
{
border-collapse:collapse;
}
tr
{
border-bottom: 1px solid #000;
}
tr.last
{
border-bottom: none;
}
Option 2: CSS Pseudo Class
The alternative is to use the :last-child CSS pseudo class. Using the :last-child class doesn't require any changes to the HTML and so may be a better choice if you aren't able to change the HTML. The CSS is almost identical to the above:
CSS:
table
{
border-collapse:collapse;
}
tr
{
border-bottom: 1px solid #000;
}
tr:last-child
{
border-bottom: none;
}
The drawback of this approach is that versions of Internet Explorer before 9 don't support the :last-child pseudo class.
I know this is an old question, but it's worth mentioning that now with CSS3 all you have to do is us the not() selector in your CSS, like this:
tr:not(:last-child) {
border-bottom: 1px solid #E3E3E3;
}
tr:last-child td {
border-bottom: none;
}
Saves you putting a class on the last tag.
this is used with any class call in html
tr:last-child {
border-bottom: none;
}
You can also use this way
table tr:not(:last-of-type) { border-bottom: none; }
If you're using jQuery you can use the following script
$(document).ready(function() {
$(".tableClass tr:not(:last) > td").css('border-bottom', ' 1px solid #DDD');
});
Is there a way to apply a Class' style to only ONE level of td tags?
<style>.MyClass td {border: solid 1px red;}</style>
<table class="MyClass">
<tr>
<td>
THIS SHOULD HAVE RED BORDERS
</td>
<td>
THIS SHOULD HAVE RED BORDERS
<table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
</td>
</tr>
</table>
Is there a way to apply a Class' style to only ONE level of td tags?
Yes*:
.MyClass>tbody>tr>td { border: solid 1px red; }
But! The ‘>’ direct-child selector does not work in IE6. If you need to support that browser (which you probably do, alas), all you can do is select the inner element separately and un-set the style:
.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }
*Note that the first example references a tbody element not found in your HTML. It should have been in your HTML, but browsers are generally ok with leaving it out... they just add it in behind the scenes.
how about using the CSS :first-child pseudo-class:
.MyClass td:first-child { border: solid 1px red; }
This style:
table tr td { border: 1px solid red; }
td table tr td { border: none; }
gives me:
this http://img12.imageshack.us/img12/4477/borders.png
However, using a class is probably the right approach here.
Just make a selector for tables inside a MyClass.
.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}
(To generically apply to all inner tables, you could also do table table td.)
I wanted to set the width of the first column of the table, and I found this worked (in FF7) - the first column is 50px wide:
#MyTable>thead>tr>th:first-child { width:50px;}
where my markup was
<table id="MyTable">
<thead>
<tr>
<th scope="col">Col1</th>
<th scope="col">Col2</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
I guess you could try
table tr td { color: red; }
table tr td table tr td { color: black; }
Or
body table tr td { color: red; }
where 'body' is a selector for your table's parent
But classes are most likely the right way to go here.
I think, It will work.
.Myclass tr td:first-child{ }
or
.Myclass td:first-child { }