I've been trying to make a colored table with even rows with class item a different color than the odd ones.
Please, see fiddle: http://jsfiddle.net/x7XT5/
HTML:
<table>
<tr class="item">
<td>1</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>2</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>3</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>4</td>
</tr>
<tr>
<td>info</td>
</tr>
</table>
CSS:
table tr.item:nth-child(2n)
{
background-color: yellow;
}
table tr.item:nth-child(2n+1)
{
background-color: red;
}
How to make it work in css?
UPD1
<tr> without class item must be on white background.
<tr class="item">'backgrounds must be red/yellow on even/odd positions.
table tr
{
background-color: yellow;
}
table tr.item:nth-child(2n+1)
{
background-color: red;
}
update: Here you go:
table tr {
background-color: white;
}
table tr.item:nth-child(n)
{
background-color: red;
}
table tr.item:nth-child(4n+1)
{
background-color: yellow;
}
Try this. No need to set the nth child.
http://jsfiddle.net/x7XT5/2/
You could also use odd & eeven keywords.
Hey remove the class and check in your tr and css file
and create easily
Live demo http://jsfiddle.net/x7XT5/1/
and
second method is Live Demo http://jsfiddle.net/x7XT5/3/
Updated Live demo http://jsfiddle.net/x7XT5/5/
First, I think, you should use :nth-of-type instead of :nth-child, but
unfortunately, :nth-of-type doesn't work with classes, so I dont know any pure CSS solution.
You can always use:
table tr.item:nth-of-type(4n+3)
{
background-color: yellow;
}
table tr.item:nth-of-type(4n+1)
{
background-color: red;
}
Works for this example.
Related
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 4 years ago.
How can I alternate the colors of rows in a table that have a tr with a specific class?
In my example table below, I would like to have rows that alternate between shades of green, and rows between different shades of orange.
I tried various CSS selectors to no avail.
I would like to avoid doing this in jQuery.
th {
height: 30px;
}
tr.green:nth-child(even) {
background-color: #f1f8e9;
}
tr.green:nth-child(odd) {
background-color: #f1f8e9;
}
tr.orange:nth-child(even) {
background-color: #fff8e1;
}
tr.orange:nth-child(odd) {
background-color: #ffecb3;
}
<table data-vertable="ver2">
<thead>
<tr>
<th>no class</th>
</tr>
</thead>
<tbody>
<tr class="green">
<th>green</th>
</tr>
<tr class="green">
<th>green</th>
</tr>
<tr class="orange">
<th>orange</th>
</tr>
<tr class="orange">
<th>orange</th>
</tr>
</tbody>
</table>
Example of the kind of alternating I am talking about:
First of all .green is a class of tr so you should not write it like .green tr but you can simply go with .green secondly change the nth selector to nth-child . Check the snippet for details
.green:nth-child(2n+1) {
background-color: red;
}
.green:nth-child(2n) {
background-color: blue;
}
.orange:nth-child(2n) {
background-color: green;
}
.orange:nth-child(2n+1) {
background-color: yellow;
}
<table data-vertable="ver2">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr class="green">
<th>hello</th>
</tr>
<tr class="green">
<th>text</th>
</tr>
<tr class="orange">
<th>random</th>
</tr>
<tr class="orange">
<th>value</th>
</tr>
</tbody>
Hope this helps
I have the following code:
<div class="main-l">
<table class="tbl">
..
</table>
</div>
I am using the following CSS to exclude tables with "main-l tbl" classes:
table:not(.main-l .views-table) {
..
}
What I noticed is the not: selector excludes all the tables with classes .views-table regardless of using '.main-l .views-table'.
How would I guarantee that only those with threaded classes such as '.main-l .views-table' are excluded, but not those with only .views-table class?
Since .tbl is a child of .main-l it doesn't work this way. The :not() selector only works for the element itself, not for parent elements.
You would have to do this:
div:not(.main-l) .tbl {
...
}
Note that using div in css should be avoided, better set a class like .tbl-container or similar.
Since .main-1 is parent element you will have to use not() on that element to exclude table that is insede it.
table {
width: 50px;
height: 50px;
border: 1px solid black;
}
*:not(.main-l) > table {
background: red;
}
<div class="main-l">
<table class="views-table"></table>
</div>
<table class="views-table"></table>
You are already referring to the table but your selector is trying to refer to a class of the outer div by using main-l.
You can use one of the following to achieve what you are after:
table:not(.views-table) {
background: teal;
}
or if you want to be more specific
div.main-l table:not(.views-table) {
background: teal;
}
.main-l table {
height: 100px;
width: 100px;
border: 1px solid black;
}
table:not(.views-table) {
background: teal;
}
div.main-l table:not(.views-table) {
background: teal;
}
<div class="main-l">
<table class="tbl">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="main-l">
<table class="views-table">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="main-l">
<table class="tbl">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
I have different tables in my page which should have different border, cellpadding etc. I can create many classes like,
.pad5 td {padding:5px}
and then using,
<table class="pad5">
But if I use 'table' is css, the style is applied to all tables. How can I achieve the result?
You can try to add an ID to each table and in css make reference with this ID like:
CSS & HTML:
#table1 tr td {
padding: 5px;
border: 4px solid #888;
}
#table2 tr td {
padding: 5px;
border: 4px solid red;
}
<table id="table1">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
<table id="table2">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
declare classes for each type of styling you want to create, and assign to the <table> in the html via the class attribute
css
.table1 {
...
}
.table2 {
...
}
html
<table class="table1">
...
</table>
<table class="table2">
...
</table>
You can give your tables class names also
Example HTML:
<table class="mytable">
<tr>
<td>My cell</td>
</tr>
</table>
<table class="anothertable">
<tr>
<td>My cell</td>
</tr>
</table>
Example CSS:
.mytable {
border: 1px solid black;
}
.anothertable {
border: 1px solid red;
}
The first table will have a 1px solid black border and the second table will have a 1px solid red border.
I found that if I don't use table at all in CSS it works.
e.g.- .cell {border-spacing:10px}
give each of them seperate ids. classes are for css which will be applied to a bunch of different objects, ids are for css which will be applied to specific objects
<table id="first_table"></table>
I would like to give a css class to a row
and i would like to make the first column black and the second column red.
I dont want to use colgroup because this is a row specific action not whole table should be effected.
You could use:
td { color: black; }
td:nth-child(2) { color: red; }
This is possible without CSS3 !
Sample
http://jsfiddle.net/Q3yu5/1/
CSS
tr.special_row td {
background-color: #000;
}
tr.special_row td + td {
background-color: #f00;
}
tr.special_row td+td+td {
background-color: #fff;
}
HTML
<table>
<tr class="special_row">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
... this is a row specific action not whole table should be effected.
Then applying different styles to your first and second column of the given row could be useful:
<style type="text/css">
td.first
{
background-color: black;
color: white;
}
td.second
{
background-color: red;
color: white;
}
</style>
<table>
<tr>
<td class="first">1st row, 1st column</td>
<td class="second">1st row, 2nd column</td>
</tr>
<tr>
<td>2nd row, 1st column</td>
<td>2nd row, 2nd column</td>
</tr>
</table>
In CSS3 you can use the :nth-child() pseudo-class.
See the Docs for how to use it.
Also, as of early 2019, there's barely a reason not to use CSS3 selectors.
You need to create 2 types of CSS.
For each row you add the CSS you want.
Say I have two classes row and altRow. What is the best practice when setting the backround-color of table rows? I only ask this because I was told that I shouldn't set such properties on the <tr> element. Thanks!!
You were told right, browsers generally don't deal ok with background set on tr elements.
however, you can set the classe to <tr> elements:
<tr class="row">
<td></td>
<td></td>
</tr>
<tr class="altRow">
<td></td>
<td></td>
</tr>
and then in css, use cascading face of CSS :)
.row td { background: yellow; }
.altRow td { background: blue; }
If you're looking for alternating table rows, CSS3 also allows you to do this:
tr:nth-child(odd) { background-color: #ddd; }
tr:nth-child(even) { background-color: #eee; }
With CCS3, you no longer need alternating class names in your HTML