Hover effect on table row - css

I have a table with a class applied and I want to add a hover effect to all rows with a specific class name. But this doesn't seem to work. Using chrome. Must work in IE8 as well. Can anyone help me get this working please?
html ->
<table class="myTable">
<tr class="myRow">
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
css ->
.myTable.myRow tr:hover td{
background-color:red;
}
Here's a Fiddle


You can just use this:
.myRow:hover {
background:red;
}
fiddle


You have applied the class slightly wrong change it to:
.myTable tr.myRow:hover td{
background-color:red;
}
Reasoning being in your css you are saying find the class myTable that also has class myRow but its your tr element with the myRow class.

Related

How to hide this specific text from a <TR> in a TABLE HTML CODE

I am trying to hide this:
<thead>
<tr>
<th class="col-image all" data-name="image" data-orderable="false" data-searchable="false" data-width="200px" data-priority="4">Image</th>
</tr>
</thead>
And this is my attempt:
thead.col-image all {
display: none;
}
^ this didn't work - any idea?
Thanks!

You are calling the wrong element and ALSO 'all' is not a selector;
thead.col-image all {} // is calling e.g. <thead class="col-image">
It should be
thead tr th.col-image.all { display: none; }

thead.col-image all means <all> tags in <thead class='col-image'>
correct css for your code should be
thead .col-image.all {
display: none;
}
https://jsfiddle.net/pb5k4v63/26/

with <th> tag only heading will disappear.
Attach a class for <th>or <td> or <tr> depending on your requirement.
and for that class apply the property
{visibility:hidden} which will not affect alignment of your table.
where as {display:none} can affect the alignment (though it works.)

you can use class for td th or add a span to text you want to hide and add class to it
.hide{
visibility:hidden;
}
<table>
<tr>
<td>hello</td>
<td class="hide">hide me</td>
<td>and also <span class="hide">hide me</span></td>
</tr>
</table>

TL;DR Wrap your <thead>, <th>, etc. within the <table> element. Also make sure you are calling the proper elements in your CSS.
An HTML table is defined with the <table> tag.
So in essence you have the <th>, <thead>, etc. elements operating outside of a <table>, so you are breaking your code because the <th>, <thead>, etc. require the parent <table> element to function properly.
Why you may ask? As stated above a table is defined with the <table> tag, so you do not really have a table on your page.
In conclusion "wrap your tables rows, heads, etc within the <table> element for now on.
Here is the code:
HTML
<table>
<thead>
<tr>
<th class="col-image all" data-name="image" data-orderable="false" data-searchable="false" data-width="200px" data-priority="4">Image</th>
</tr>
</thead>
</table>
CSS
th.col-image.all{
display: none;
}
You can view the code live here: https://jsfiddle.net/W3Develops/nbf17pus/6/
I also added another table in there so you can see how to properly make a table.
Here is a link to Mozilla Developer Network and W3Schools so you can learn more about making tables. Good luck:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
https://www.w3schools.com/html/html_tables.asp
Also you were calling classes for thead when you should have been calling classes for th.
Cheers.

Skip first-child selector's style for specific element

Lets say we have generic css class for table to use on all places in our application. Lets consider also this style has first-child selector.
tr td:first-child { ... }
I would like to use this class for an specific table but skip all first-child styles.
Since this is generic style class for tables i cant remove from it and also dont want to handle this with inline styling.
Thanks

You could be more specific for that particular table, assuming it has a class or an id you can use:
tr td:first-child {
color: red;
}
.test tr td:first-child {
color: green;
}
<table>
<tr>
<td>First td</td>
<td>Second td</td>
</tr>
</table>
<table class="test">
<tr>
<td>First td</td>
<td>Second td</td>
</tr>
</table>
Excuse the limited markup, but you get the point. Because the .test tr td:first-child {} class is more specific than the generic style, it overrides it, but only for the table with the class test.
More info on specifity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Style every thing except first child

I know of the selector :not() but it doesn't work, like tr:not(tr:first-child):hover. I want to style the other trs but not the first one, because it holds the headings. How can I do this without using an id or class?

You can only use simple selectors in :not(), try
tr:not(:first-child)
http://jsfiddle.net/mowglisanu/Sn7Uw/

Another option would be to use the th element which is specifically represents the header cell in a table.
Example
<table>
<thead>
<tr>
<th>Number</th>
<th>element</th>
</tr>
</thead>
<tbody>
<tr>
<td>4.1.1</td>
<td>html</td>
</tr>
<tr>
<td>4.2.1</td>
<td>head</td>
</tr>
</tbody>
</table>

Use the adjacent sibling combinator. As a bonus, it's a bit more widely supported than :not()
TR + TR { background-color: silver; }
TR + TR:hover { background-color: green; }
http://jsfiddle.net/ETYQN/2/

Put your headers in a <thead> and your stylable rows in the <tbody> then use:
tbody tr:hover { background: red }
and it won't matter what the contents is.
http://jsfiddle.net/stevemarvell/we4a6/

CSS performance- descendant selector vs. class selector

I appending table dynamically using javascript in html with say 50000 cells.
<table id="dataTable">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
.....
<td>data1</td>
</tr>
..........
<tr>
<td>data1</td>
<td>data2</td>
.....
<td>data1</td>
</tr>
</tbody>
</table>
I'm styling the td with descendant selector as,
#dataTable td{
text-align:right;
border:1px solid #adadad;
padding-right:10px;
}
Another option is to give class to each td using class selector.
<table id="dataTable">
<tbody>
<tr>
<td class="format">data1</td>
<td class="format">data2</td>
.....
<td class="format">data1</td>
</tr>
..........
<tr>
<td class="format">data1</td>
<td class="format">data2</td>
.....
<td class="format">data1</td>
</tr>
</tbody>
</table>
Here we have used format class for styling.
.format{
text-align:right;
border:1px solid #adadad;
padding-right:10px;
}
I'm facing performance issue while rendering the table in browser. Is this because I've used DESCENDANT SELECTOR INSTEAD OF CLASS SELECTOR.
Or Browser is not able handle large data.

About the table performance
Tables can be slow to render mostly due to the dynamic column sizes that need to be calculated and set on every change.
You can solve this by specifying a fixed size for each column, like so:
#dataTable td {
width: 100px; /* Set sizes appropriately */
}
This should make your table more performant
About CSS performance
CSS selects by the last token first, so for example, to execute the following selector:
#dataTable td
CSS will first select ALL td elements and then check if each of them is a descendant of #dataTable. Technically, specifying a class for each cell is faster.
However, this is probably not significant enough to pay for by complicating your overall design.
I recommend reading Efficiently Rendering CSS by CSS-Tricks to get a better idea about CSS and performance.

Zebra striping a table with hidden rows using CSS3?

I've got a table
<table id="mytable">
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
I'm trying to set the table striping to use nth-child selectors but just can't seem to crack it.
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #FFF;
}
I'm pretty sure I'm close ... can't quite seem to crack it.
anyone pass along a clue?

Here's as close as you're going to get. Note that you can't make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.
#mytable tr:nth-child(odd) {
background-color: #000;
}
#mytable tr:nth-child(even) {
background-color: #FFF;
}
<table id="mytable">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
Here are the fixes that I made:
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
There's no need to specify an ancestor selector for an id based selector; there is only ever one element that will match #table, so you're just adding extra code by adding the table in.
#mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
Now, [#display=block] would match elements which had an attribute display set to block, such as <tr display=block>. Display isn't a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can't do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it's in the process of doing when it's applying this selector. So, you won't be able to select on whether table rows are displayed. Since nth-child can only take the nth child no matter what, not nth with some attribute, we're going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that's all you can do.
#mytable tr:nth-child(odd) {
background-color: #000;
}
And there you have it.

If you are using JQuery to change the visibility of rows you can apply the following function to the table to add an .odd class where appropriate. Call it each time the rows visible is different.
function updateStriping(jquerySelector){
$(jquerySelector).each(function(index, row){
$(row).removeClass('odd');
if (index%2==1){ //odd row
$(row).addClass('odd');
}
});
}
And for the css simply do
table#tableid tr.visible.odd{
background-color: #EFF3FE;
}

While you can't Zebra stripe a table with hidden rows using CSS3 you can do it with JavaScript. Here is how:
var table = document.getElementById("mytable");
var k = 0;
for (var j = 0, row; row = table.rows[j]; j++) {
if (!(row.style.display === "none")) {
if (k % 2) {
row.style.backgroundColor = "rgba(242,252,244,0.4)";
} else {
row.style.backgroundColor = "rgba(0,0,0,0.0)";
}
k++;
}
}

For a jquery way, you could use this function which iterates through the rows in your table, checking the visbility of the row and (re)setting a class for visible odd rows.
function updateStriping(jquerySelector) {
var count = 0;
$(jquerySelector).each(function (index, row) {
$(row).removeClass('odd');
if ($(row).is(":visible")) {
if (count % 2 == 1) { //odd row
$(row).addClass('odd');
}
count++;
}
});
}
Use css to set a background for odd rows.
#mytable tr.odd { background: rgba(0,0,0,.1); }
Then you can call this zebra-striper whenever by using:
updateStriping("#mytable tr");

I came up with a sort of solution but it's reliant on the fact that the table can only ever have a maximum number of hidden rows and comes with the downside of requiring 2 additional CSS rules for each possible hidden row. The principle is that, after each hidden row, you switch the background-color of the odd and even rows around.
Here's a quick example with just 3 hidden rows and the necessary CSS for up to 4 of them. You can already see how unwieldy the CSS can become but, still, someone may find some use for it:
table{
background:#fff;
border:1px solid #000;
border-spacing:1px;
width:100%;
}
td{
padding:20px;
}
tr:nth-child(odd)>td{
background:#999;
}
tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]{
display:none;
}
tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}
<table>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>

in jquery ..
var odd = true;
$('table tr:visible').each(function() {
$(this).removeClass('odd even').addClass(odd?'odd':'even');
odd=!odd
});

You can easily fake the zebra stripes if you apply a vertically repeating gradient on the parent table, positioned exactly to match the rows' height (the rows would have to be transparent). That way the table won't care if anything's hidden, it will repeat no matter what.

If anyone tries to do something like me, where I have alternating hidden and visible rows, you can do this:
.table-striped tbody tr:nth-child(4n + 1) {
background-color: rgba(0,0,0,.05);
}
This will get every 4th element starting with the 1st one, and allows you to maintain striping with hidden rows between each visible row.

Here is a 2022 version of a javascript version
let cnt = 0;
document.querySelectorAll("#mytable tbody tr").forEach(tr => {
cnt += tr.hidden ? 0 : 1;
tr.classList.toggle("odd",cnt%2===0);
});
.odd { background-color: grey; }
<table id="mytable">
<thead><tr><th>Num</th></tr></thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr hidden><td></td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</tbody>
</table>

I add in css:
tr[style="display: table-row;"]:nth-child(even) {
background-color: #f3f6fa;
}
and on create tr add in tag
style="display: table-row;"

Jquery codes for zebra color in html table
$("#mytabletr:odd").addClass('oddRow');
$("#mytabletr:even").addClass('evenEven');
And CSS you can do
.oddRow{background:#E3E5E6;color:black}
.evenRow{background:#FFFFFF;color:black}

Resources