Alternate rows in one column only - CSS - css

How do I color alternate rows in only one column in my table? What's the code for that?

As #afranz409 stated, the ideal solution would be to create a class. However, this can be done with a CSS specific solution, with limited browser capabilities (None of the IE browsers < 9):
table tr:nth-child(2n) > td:nth-child(1) {
background-color: #eee;
}
In other words, for every alternate row, within the first table column, fill the background color #eee. As seen on JsFiddle.
For a more cross-browser compatible solution, I would recommend using this selector within jQuery:
$('table tr:nth-child(2n) > td:nth-child(1)').css("background-color", "#eee");

You're going to have to set the class on the specific <td>'s that you want colored, rather than the <tr>'s like you would for alternating rows

You could do it using the nth-child() selector.
See: http://jsfiddle.net/thirtydot/2NxE6/
CSS:
tr:nth-child(2n) > td:nth-child(4) { /* highlight column 4 */
background: #ccc
}
This works in modern browsers, but it doesn't work in Internet Explorer until version 9.
If you need it to work in earlier versions of Internet Explorer, here are your choices:
Use something like http://selectivizr.com/ to enable significant CSS3 support in older versions of IE.
Apply the selector using jQuery instead - this is a good option if your site already relies on jQuery.
Use another answer that suggests adding a class to the relevant td elements.

For the first column you can do something like:
tr:nth-child(odd) > td:first-child {
background: green;
}
tr:nth-child(even) > td:first-child {
background: blue;
}
It really depends on which column you want to color. If the x-th column, you can try td:nth-child(x).

Related

Applying tr:hover but only to a certain class

I have some CSS that colors a row on my table on hover.
tr:hover {
background: gray !important;
}
However, it also highlights the filter row on the table. So I did Inspect and find it has <tr class="MuiTableRow-root MuiTableRow-hover"...etc
So, my question is, how can I modify the above code so that it applies only to that class shown above?
Edit: First attempt at apply class.
.MuiTableRow-root MuiTableRow-hover {
tr:hover {
background: gray !important;
}
}
As pointed out in the comments, please take a look at the documentation for class selectors.
You are having trouble to combine the class with the element's tag.
In this case they are written together like this:
tr.MuiTableRow-hover:hover {
background: gray !important;
}
When the HTML tag has the class: Write the tag and . and then the class
When the HTML tag has some element inside with a certain class, separate them with a space
Do yourself a favor and search for CSS tutorials to teach you the basics. It's not very hard to learn if you can spare the time
A little bit advanced is trusting CSS Specificity and leaving out !important. If your selector is more specific (or your CSS was loaded later) your style will be applied even without use of !important.
tr.MuiTableRow-hover:hover {
background: gray;
}
The css rule should look like this:
tr.MuiTableRow-hover:hover {
background: gray !important;
}
Note that using !important is not best practice so better if you try to avoid it if possible

Hide a Span title from a th scope tag

I have to hide part of a table, the cells are th tags and inside the th I have Span title. I been looking but I can't find any tip. I would like to hide one of the cells, in sort of just hiding one cell of the the entire table. Its possible to perform this with the CSS file?
This is how my css is made:
.GridHeaderStyle th{text-align:center;}
.GridMainSytle td, .GridHeaderStyle th
{
border:thin solid #ffffff;
*border:none;
}
As you can see the th and td are together and I can not really just specify the th in question. Google developper tools show me that the th tag is as
<th scope="col" widgth="10%">
<span title="column1">
I have tried the follow but it hide me all the cells and not the one in question.
.GridHeaderStyle th[scope=col]
{
display:none;
}
Thanks in advance
Please try below CSS code :
.GridHeaderStyle th span {
display:none;
}
Without seeing more of the markup, it's hard to know for sure, but it's likely based on the example that the th[scope=col] selector matches all of your header cells. Look at using the nth-child CSS selector to be more specific, but be aware that's a brittle solution. If your markup changes such that the header you wish to suppress is now in a different order, your rule will hide the wrong column.
If your use case allows it, you could hide the span rather than the column, and therefore address the element a bit more specifically. Try the rule:
th span[title=column1] {
display:none;
}

How to exclude more than one th child

I want to exclude last and second last child of th to apply some css property.Individually it come be done like
.List thead tr th:not(:last-child){
//Some Css properties
}
and same for second last child.Can it be combined using not operator in one css selector?
CSS3 brings us the :nth-last-child() selector. To combine multiple :not items just add them to the end.
JSFiddle
li:not(:last-child):not(:nth-last-child(2)) {
color:red;
}
According to caniuse.com this method may be only fully supported from IE9. I say may be because caniuse isn't specific enough. Personally, I don't go out of my way to support < IE9 anymore unless it's a requirement.
.List thead tr th:nth-last-of-type(1) ,.List thead tr th:nth-last-of-type(2) {
/*Some Code*/
}
Try This

Alternating table color

I am having trouble getting my CSS to look right. I want alternating colors in my table, but it doesn't seem to be working. Here is my CSS:
table.className tbody tr:nth-child(even){
background-color: white;
}
table.className tbody tr:nth-child(odd){
background-color: grey;
}
Your code looks good. Could be two things, your version of IE that you are using is to old (IE8 and below I believe doesn't support this), or you have these styles being set elsewhere with a !important attached to them.
Without seeing the HTML, there are a couple of possibilities:
The class name doesn't match
The tbody tag is missing (either way, tbody isn't needed in the CSS selector)
There are a couple of reason as to why this may not be working for you. First the CSS code that you are using is CSS3 and may not be supported in the browser you are using: http://www.impressivewebs.com/css3-browser-support/
Another reason this may not be working is that you have included the "tbody" tag in the CSS which indicates that your html table is setup as such. This is actually a tag that some developers forego, if you html table does not have a "" tag then you must remove it from the CSS in order for this to work.
Given that its been established that you are using IE8 which doesn't support :nth-child in CSS, you can achieve the same thing using jQuery for better cross-browser support:
$(function() {
$("table.className tr:nth-child(even)").css('background-color','white');
$("table.className tr:nth-child(odd)").css('background-color','grey');
});

Using selectors in css to filter out certain elements

I'm trying to get ride of the last column in each table EXCEPT for the last table on the page. Is there a way to do this in css?
Here is what I have, and it doesn't seem to be working...
table:not(:last-child) tr td:last-child {
}
If this can't be done in css, please just let me know. :)
You may want to use table:not(:last-of-type) instead, in case there are other elements after that last table in your page:
table:not(:last-of-type) tr td:last-child {
display: none;
}
It also depends on the browsers you're testing in. No version of IE older than 9 supports the pseudo-classes being used.

Resources