Hi guys I have a table like that?
<table>
<colgroup>
<col class="selected">
<col>
</colgroup>
<tbody>
<tr>
<td>lorem</td>
<td>lorem</td>
</tr>
</tbody>
</table>
and my styles are:
col.selected {
background-color: #f3f3f3; /*for selected column*/
}
table tbody tr:nth-of-type(2n+2){
background-color:#fafafa; /*zebra effect*/
}
all works great however the zerba style owerites col selection style. Any ideas how to avoid that so the selected column will be using style from col rather than nth child ?
The problem is that the selector for the zebra background has a higher specificity than the col selector. Either give the col selector a higher specificity, or give the tr selector a lower one (or both). If they're equal, order of rules in your CSS matters.
table colgroup col.selected {
background-color: #f3f3f3; /*for selected column*/
} /* specificity: 13 */
table tr:nth-of-type(2n+2){
background-color:#fafafa; /*zebra effect*/
} /* specificity: 12, will be overridden */
As far as I know, you can't. The best work-around may to be dynamically render some CSS that highlights the correct column. To highlight the second column of a table, for example, you could use:
table tbody tr td:nth-child(2) {
background-color:red;
}
Example here:
http://jsfiddle.net/ChrisPebble/tbLrv/
Your code looks fine other than your col in the html doesn't have a selected class applied. Could this be your problem on the actual page (I relise you've only posted a code sample).
Related
I have a CSS provided which contains following code
table.exm_table tbody tr.odd td{
background-color:#ffffff;
}
I'm not sure what should it style. Will be background color set at the td element in following structure?
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
EDIT:
Actually I've overlooked second part of the CSS:
table.exm_table tbody tr:nth-child(odd) td,
table.exm_table tbody tr.odd td
Which caused my confusion why code haven't been working...
Your HTML is was incorrect but otherwise the CSS will work and targets the td. Note that in your (original) example there is no table-row <tr>. You'll see it works with the corrected mark-up:
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/8zan1jyf/
As you can see, your CSS selector does address the td - or more specifically:
any td within a tr (that has the classname 'odd') within a tbody within a table (that has the classname 'exm_table')
There's probably no need to be quite that specific ;)
UPDATE
Since you've edited your question here's some further info about the alternating row style that seems to be confusing you.
table.exm_table tbody tr:nth-child(odd) td uses the nth-child selector to get tds in alternate rows.
table.exm_table tbody tr.odd td simply selects all tds within trs that have the classname 'odd'. (It's this classname that may be confusing because it has nothing to do with odd/even in itself and could just as easily be called 'bob')
Here's a demo to help clarify: http://jsfiddle.net/8zan1jyf/8/
/* to style ALL tds */
table.exm_table tbody tr td {background-color:pink;}
/* to style EVERY-OTHER td */
table.exm_table tbody tr:nth-child(odd) td {background-color:red;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'odd' (nothing to do with actual odd/even ordering) */
table.exm_table tbody tr.odd td {background-color:blue;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'bob' */
table.exm_table tbody tr.bob td {background-color:green;}
your initial css targets td and sets background to white (#fff)
you can just target classes directly
.exm_table {
background-color:#ffffff;
}
.odd {
background-color:#eeeeee;
}
Sorry.. I'm just a little bit confused with other answer in SO..
I have 2 tables,
and one of them rendered inside a table. (table in table)
<table class="master">
<tr>
<td>ID</td><td>Name</td><td>Information</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>
<table class="detail">
<tr>
<td>ID</td><td>Order</td>
</tr>
<tr>
<td>1</td><td>CA09-WYOMING-BR</td>
</tr>
</table>
</td>
</tr>
</table>
style
<style>
table.detail{
border:1px solid red;
border-collapse: collapse;
/* etc...about 20 lines code */
}
table.detail td{
border:1px solid red;
background:red;
/* etc...about 20 lines code */
}
table.master {
border:1px solid black;
border-collapse: collapse;
}
table.master td {
border:1px solid black;
background:gray;
}
</style>
And the detail table style not rendered properly because overridden by parent table CSS.
I know there are !important tag to make child CSS style not overridden, but if the CSS style about 20 lines of code should I add '!important' tag to all of them?
?
http://jsfiddle.net/vxdM3/
No need for !important here... Reverse the order of your styles. Put the css for the master table before detail. The way you have it is that the css for detail is being applied first then the master css is applied overriding what was set for detailed.
re-orded css fiddle
Or if you don't want to move css around you can update the selectors to table.master table.detail{} and table.master table.detail td{}.
updated selector fiddle
As a general rule, I use > to avoid styling nested elements unintentionally.
.master > tr > td
{
....
}
Actually, since I always use tbody, it is more like:
.master > tbody > tr > td
I don't like surprises, so I try to be careful to write css that is very explicit on what it is styling. Sure, it is a bit slower, but I find it is insignificant to the user experience and I can get stuff done a lot quicker. Others may do it differently, of course.
<table>
<tr class="here"><td><input type="text" readonly=readonly></td></tr>
<tr class="here"><td><input type="text" readonly=readonly></td></tr>
<tr class="here"><td><input type="text" ></td></tr>
</table>
td {
padding: 15px;
margin: 10px;
}
.here {
background-color: red;
}
http://jsfiddle.net/dZYEM/
How can i modify class .here that this working where child input has attribute readonly? I dont want modify html.
EDIT:
now i have: jsfiddle.net/dZYEM/2/
i would like receive: http://jsfiddle.net/dZYEM/3/
but without use style. I want receive this only with css.
There is no pure CSS way to do this as CSS does not have a has or contains selector.
But this can be done using one line of jQuery. And it's really fast.
$("tr.here:has(input[readonly='readonly'])").css('background', 'red');
Here is a working jsFiddle to try it - http://jsfiddle.net/T7hnR/2/
Hey you have two option
first is if your tr is last than apply this css
tr:last-child{
background:none;
}
Second is if your tr number is 3 than used to it.
tr:nth-of-type(3){
background:none;
}
Like here : http://jsfiddle.net/dZYEM/10/
CSS:
tr:nth-child(3n) {
background: none !important;
}
One could edit the inner element by makiung use of CSS2 selectors
E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".
But this will not allow you to select the outer parent element.
Under either CSS2 or CSS3 this does not exist, and you would have to do it with the solutions provided with JavaScript/jQuery.
Is there a way I can use one category to stylize all of my table cells? I cant just use
td{
}
because I have another table on the same page that I don't want the same style on. The table I want to stylize has around 40 cells, so is there a way to collectively style them short of copy-pasting a class or id 40 times?
Put a selector on the table tag:
<table class="my-special-table">
<tr><td></td></tr>
</table>
table.my-special-table td { /*style it up!*/ }
If your table has a specific attribute such an as ID, you can reference it in CSS specifically:
<table id="myStyledTable">
<tr>
<td>...
Like so:
#myStyledTable td {
}
Use this:
#table-id td {
/* some css */
}
Or
#table-id > tr > td { /* some css */ }
in case you will have other tables within this table that shouldn't have this style applied.
You can give an id/class to that table and do :
#yourtable td { }
Either an id or a class will allow it to be individually styled as:
<table class="myclass">
or
<table id="myid">
and then
.myclass td {}
or
#myid td {}
respectively.
I have an ordinary HTML table:
<table>
<tr>
<td class="first-column-style">FAT</td>
<td>...</td>
</tr>
<tr>
<td class="first-column-style">FAT</td>
<td>...</td>
</tr>
</table>
I want to apply CSS style to every table cell (td) in a particular column. Is it possible to do that without applying the class/style attribute to every table cell in that column, and without JavaScript?
2015 answer, and based on the first-child answer but MUCH cleaner.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
td:nth-child(1) { /* first column */ }
td:nth-child(2) { /* second column */ }
td:nth-child(3) { /* third column */ }
Super clean code
Additionally to Sean Patrick Floyd's solution you can combine :first-child with the adjacent sibling selector + (also not supported by IE6):
td:first-child { /* first column */ }
td:first-child + td { /* second column */ }
td:first-child + td + td { /* third column */ }
/* etc. */
Use the <col> tag and style it following this guide. This way you only need to add a class (or inline style specification) to the <col> element instead of each <td> in the table.
Caveats:
Any row or cell styling will supersede column styling.
The <col> tag only supports styling border, background, width and visibility (and their derivatives, such as background-color).
The border declaration does not work unless the <table> has border-collapse: collapse;, and the behavior is inconsistent between browsers.
The visibility declaration does not work properly in Chrome due to a known bug.
Well for the first and last columns you can use the :first-child and :last-child pseudo class:
/* make the first cell of every row bold */
tr td:FIRST-CHILD{
font-weight:bold;
}
/* make the last cell of every row italic */
tr td:LAST-CHILD{
font-style:italic;
}
Reference:
:first-child and :last-child
The following allows you to style columns at table level, and can be used in a more general way to the previous examples, as you don't have to make assumptions about the styles applied to a given column index within the style sheet itself.
I agree that the <col> approach is best if it fits your needs, but the range of styles is very limited.
The sample styles column 1, 2, & 4 with a grey text style.
HTML
<table class="example col1-readonly col2-readonly col4-readonly">
CSS
.example.col1-readonly tr td:nth-child(1),
.example.col2-readonly tr td:nth-child(2),
.example.col3-readonly tr td:nth-child(3),
.example.col4-readonly tr td:nth-child(4) {
color:#555;
}
This is an old post.
But I had the same question.
Found this to be working:
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(3)>td:nth-child(2){background: red;}
</style>
</head>
<table>
<tr><td></td><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>2</td><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>3</td><td>A3</td><td>B3</td><td>C3</td></tr>
</table>
</html>
This style setting sets the background color to red in the third row and second column,