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');
});
Related
I have referred to many options but still I am not able to apply CSS to my parent container. My table structure is like:
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
Now according to above structure if div2 has class colorMe then I want to color the entire td background in yellow.
I have used CSS like this but not working:
td > div> div.colorMe {
background-color:yellow;
}
Can you please tell me how I can color my td using css?
There is currently no possibility to apply CSS Rules to a parent element. There is in fact the :has Pseudoclass, which is exactly for this kind of issues, but at the moment (Nov 2017) it is not supported by any browser. The only way to achieve this would be with Javascript.
I know that you mentioned only using css but adding some javascript event to change a class is a very well documented approach. There are dozens of examples online and including the the script in your file takes no extra work if you use vanilla.
Here is a small example of changing a parent div's color on a click event
var box2 = document.querySelector('.color2');
box2.addEventListener("click", function() {
this.parentNode.style.backgroundColor = "white";
});
div {
width: 100px;
height: 100px;
border: 2px solid black;
}
.color1 {
background-color: red;
}
.color2 {
background-color: rebeccapurple;
width: 50px;
height: 20px;
}
<div class="color1">
<div class="color2"></div>
</div>
You can kind of emulate the behavior you need with the following trick:
td {
position: relative; /* make the cell a container for positioned children */
}
.colorMe::before { /* cover this container with colored pseudo element */
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color:yellow;
z-index: -1;
}
table { /* just to make the example prettier :) */
width: 100%;
height: 100px;
table-layout: fixed;
}
<table>
<tr>
<td>
Just a TD
</td>
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
<td>
Just a TD again
</td>
</tr>
</table>
It won't work, however, if you need to position something absolutely from the .colorMe element itself.
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 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;
}
I want to make a grid of around 50 columns and 50 rows with height and width of each cell to be 10px.
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
td{width:10px;}
tr{height:10px;}
</style>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
I can do this by writing the code a hundred times..
But I think there should be some more practical way of doing this by css..
Can anyone help...
I'm not sure if you can do it in css, but you can certainly do it with javascript:
<style>
td {
width: 10px;
border: 1px solid black;
}
tr {
height: 10px;
}
</style>
<script>
function makeCells() {
var t = document.createElement("TABLE");
for (var rows = 0; rows < 50; rows++) {
var newRow = document.createElement("TR");
console.log(newRow);
t.appendChild(newRow);
for (var cols = 0; cols < 50; cols++) {
var newCell = document.createElement("TD");
newRow.appendChild(newCell);
}
}
document.body.appendChild(t);
}
makeCells();
</script>
This is all you need:
td {
width:10px;
height:10px;
}
However, using a table you can't be sure the width will be always 10px for each cell, because if the window's width is less than the table width, the cells will shrink by default.
<!DOCTYPE html>
<html>
<head>
<style>
table{ border-collapse:collapse; }
table,th, td{ border: 1px solid black; }
td{width:10px;}
tr{height:10px;}
</style>
</head>
<body>
<table border="1">
<?php for($ctr=0; $ctr<=50; $ctr++){ ?>
<tr>
<?php for($ctr2=0; $ctr2<=50; $ctr2++){ ?>
<td></td>
<?php }?>
</tr>
<?php }?>
</table>
</body>
</html>
just a try
As an alternative to the other, working answers, you could try something like this.
What I've done is created 2500 <div>s with javascript, then gave them a padding of 1% in a 500px container. 1% of 500 is 5, so that gives us the 10px by 10px square. Float them all left in the container and they nicely align into this 50x50 grid.
The key code is:
div {
padding: 1%;
background: #aaa;
float: left;
}
I added alternate background colours to help show you what is there.
This won't play very nicely if you add content to the divs, but it looks like you aren't wanting to do that anyway if they are just 10px wide.
You need 50 × 50 elements anyway, and you cannot create elements in a loop in CSS or in HTML (they have no loops, as they are not programming languages). There are many different ways to generate the elements in server-side or client-side programming languages, but you first need to decide which technology to use and then use the elementary constructs of the chosen language.
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"); });