I have a table element that has also a table inside in one cell. (Jquery UI calendar is inside actually)
How can I style only the parent?
body table tr td:nth-child(2n) {
background-color: red;
}
does this: (fiddle here)
but I would like only the outer cells (number 2 and 5) to be selected.
Use the child (>) selector and add a tbody element in the selector (no HTML changes needed):
body > table > tbody > tr > td:nth-child(2n) {
background-color: red;
}
jsFiddle example
This works because it specifically only selects the outer table.
Tested successfully in Chrome, FF, and IE.
Add the following CSS:
table table tr td:nth-child(2n) {
background-color: transparent;
}
This selects the cells, but only if they have two table parents, and sets their background-color to transparent.
JSFiddle
This works, just reset the background for the inner table.
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr>
<td>4</td>
<td>5</td>
<td>
<table class="inner">
<tr><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>A</td><td>B</td></tr>
</table>
</td>
</tr>
</table>
table {
border-spacing: 2px;}
td{
border-spacing: 2px;
border: 1px solid black;
}
body table tr td:nth-child(2n) {
background-color: red;
}
body .inner tr td:nth-child(2n) {
background-color: white;
}
Fiddle
Related
I have two table in two div, each div having a different class. I would like to apply a padding to the cells of one of the tables only.
(the code below is also at JSFiddle)
The HTML part:
<div class=tight>
<table>
<tr>
<td>hello</td><td>world</td>
</tr>
</table>
</div>
<div class=wide>
<table>
<tr>
<td>bonjour</td><td>tout le monde</td>
</tr>
</table>
</div>
The CSS part:
td {
background: green;
color: white;
padding: 10px;
}
This applies padding to all cells. I tried to be specific though various combinations of
td .wide { ... }
td, .wide { ... }
td.wide { ... }
but I failed to find the right one.
Is it possible to set a property for an element, but which is a child of a specific div (specific = having a specific class)?
For example, if you want to apply padding on < td > of the first div, use:
.tight td{
padding: 10px;
}
If you prefer to exclude one of the class, you can also use :
div:not(.tight) td {
padding: 10px;
}
Use some thing like this .wide td
Is there a workaraound over css selector behaviour on a table where first or last column uses rowspan/colspan?
I want to set thin borders between cells, and thick borders around table.
The following example is simplified, setting border to the table doesn't work with more complex objetcs where my stylesheet is applied.
The question is if css selectors can act over rendered table boundaries, instead of table dom hierarchy.
<style>
table {
border-collapse: collapse;
}
td {
border:1px solid black;
}
tr > td:first-child {
border-left: 5px solid black;
}
tr > td:last-child {
border-right: 5px solid black;
}
tr:first-child > td {
border-top: 5px solid black;
}
tr:last-child > td {
border-bottom: 5px solid black;
}
</style>
<table>
<tr>
<td>A</td>
<td rowspan=2>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
Get rid of the extra borders on the cells and just apply it to the entire table.
<style>
table {
border-collapse: collapse;
border:5px solid black;
}
td {
border:1px solid black;
}
</style>
To answer your question as asked, no; child selectors will always be applied to the children as they appear in the HTML.
Having said that, you could potentially achieve what you want to do by mixing in some colspan/rowspan attribute selectors as well as the negation & only-child pseudo-classes where necessary, but that could fast become very complicated to write and maintain, depending on the complexity of the final table.
A much easier way to get the desired results in this instance is to make use of the table's border-spacing property by:
Giving that property a value of 1px.
Giving the whole table a border that's 1 pixel narrower than how you want it to appear (to take the border-spacing into account).
Setting the background-color of the table to match its border-color.
Resetting the background-color of the table cells.
table{
background:#000;
border:4px solid #000;
border-spacing:1px;
}
td{
background:#fff;
padding:5px;
}
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
Lets get straight to the point, I have created this example to better get my point across:
Demo Here
HTML:
Table 1
<table class="testClass">
<tr>
<td>Inner table
<table>
<tr>
<td>Hello</td>
<td>Testing testing</td>
<td>Bye</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<br />
<br />Table 2
<table class="testClass">
<tr>
<td colspan="3">stuff</td>
</tr>
<tr>
<td>Left</td>
<td>Middle</td>
<td>Right</td>
</tr>
</table>
CSS:
table {
border: 2px solid red;
width: 100%;
}
td {
border: 2px solid blue;
}
/* Relative CSS */
.testClass tr:last-child td:nth-child(1) {
width: 15px;
}
.testClass tr:last-child td:nth-child(2) {
width: auto;
}
.testClass tr:last-child td:nth-child(3) {
width: 15px;
}
So we have 2 tables, both with the same class. Table 1 has a table within it where as Table 2 does not.
The problem I'm finding with this is using the CSS I have created I am unable to stop the styles for .testClass from affected the child table (Inner table). I was thinking that :not() could be used but am unable to find a solution using it tho I feel this shouldn't be that hard.
Is it possible to only affect the parent within the styles from the parent getting to the child table?
Note: The CSS can only be changed not the HTML. CSS3 can be used!
I hope this made some sense, if I need to make it clearer please leave a comment.
Select the first level child and apply it.
.testClass > tbody > tr:last-child > td:nth-child(1) {
width: 15px;
}
.testClass > tbody > tr:last-child > td:nth-child(2) {
width: auto;
}
.testClass > tbody > tr:last-child > td:nth-child(3) {
width: 15px;
}
DEMO
maybe this way : http://jsfiddle.net/urryfof5/7/
Basically you call the last-child table from the body and add > so it won't affect nested tables inside:
body > table:last-child (and follow it with your css)
You could add style-declarations like
table table { border: none; }
to override styles from the parent table-declaration. This way, no nested tables will have the border. The same thing applies for the tds.
Another solution would be:
table:not(.testClass) {
border: 0px none;
}
which removes the border for all tables that do not have the testClass applied. I tested and saw this work (in another version of the below Fiddle).
Here's a Fiddle with your code with two additional declarations, removing the borders for the inner table:
http://jsfiddle.net/erlingormar/bk6m4w5d/#base
I have two styles, one which is at element level 'td' and another which is at class level '.specialTable td'. And I've run into some problems as the class level style is inheriting all the 'td' style properties if I have not specified them again.
I have a CSS style
td
{
background-color:black;
}
and then I have
.specialTable tr:nth-child(even) {
background-color: white;
}
and
.specialTable td
{
background-color:none;
}
What happens here is that even though I've asked.specialTable td to have no background, it inherits the black background from element style 'td' and this causes my element style 'tr' to be blocked out, because cells are on top of rows.
I am trying to set alternating row style to my table. Please help me with how I can stop the original 'td' element style from getting in the way.
Here is the fiddle:
http://jsfiddle.net/PIyer/phADs/1/
you have a type in your css, but im not sure if that is the problem
specialTable tr:nth-child(even) {
background-color: white;
}
should be
.specialTable tr:nth-child(even) {
background-color: white;
}
aslso background-color:none is not valid css , maybee background-color:transparent
none is not a valid property for the background color. Try this:
.specialTable tr {
background-color: black;
}
.specialTable tr:nth-child(even) {
background-color: white;
}
Or you might use in your example just
.specialTable td
{
background-color: transparent;
}
This should let the white shine through.
You could simplify things, by using basic CSS overriding.
Let's say you have this:
<table class="specialTable">
<tr>
<td>This is an odd row</td>
</tr>
<tr>
<td>This is an even row</td>
</tr>
<tr>
<td>This is an odd row</td>
</tr>
<tr>
<td>This is an even row</td>
</tr>
</table>
And your default <td> style is this:
td {
background-color:black;
color: #FFF;
}
To make alternating (zebra) styling to .specialTable, you can simply do this:
.specialTable tr:nth-child(even) td {
background-color: blue;
}
This will override the original CSS defintion for <td> for all <td> tags within an even <tr> tag.
Check out a working example here: http://jsfiddle.net/rh5vV/
It's important to note that the nth-child sudo selector does not work in versions of IE8 and lower, so you may want to apply a class of .even to your even <tr> tags.
Try this out
.specialTable tr td {
background-color:transparent;
}
using background none is incorrect, use transparent instead
http://jsfiddle.net/RBY2v/1/
You can use background-color:transparent; or depending on background:none;:
.specialTable td {
background-color:transparent;
}
Is there a way to apply a Class' style to only ONE level of td tags?
<style>.MyClass td {border: solid 1px red;}</style>
<table class="MyClass">
<tr>
<td>
THIS SHOULD HAVE RED BORDERS
</td>
<td>
THIS SHOULD HAVE RED BORDERS
<table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
</td>
</tr>
</table>
Is there a way to apply a Class' style to only ONE level of td tags?
Yes*:
.MyClass>tbody>tr>td { border: solid 1px red; }
But! The ‘>’ direct-child selector does not work in IE6. If you need to support that browser (which you probably do, alas), all you can do is select the inner element separately and un-set the style:
.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }
*Note that the first example references a tbody element not found in your HTML. It should have been in your HTML, but browsers are generally ok with leaving it out... they just add it in behind the scenes.
how about using the CSS :first-child pseudo-class:
.MyClass td:first-child { border: solid 1px red; }
This style:
table tr td { border: 1px solid red; }
td table tr td { border: none; }
gives me:
this http://img12.imageshack.us/img12/4477/borders.png
However, using a class is probably the right approach here.
Just make a selector for tables inside a MyClass.
.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}
(To generically apply to all inner tables, you could also do table table td.)
I wanted to set the width of the first column of the table, and I found this worked (in FF7) - the first column is 50px wide:
#MyTable>thead>tr>th:first-child { width:50px;}
where my markup was
<table id="MyTable">
<thead>
<tr>
<th scope="col">Col1</th>
<th scope="col">Col2</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
I guess you could try
table tr td { color: red; }
table tr td table tr td { color: black; }
Or
body table tr td { color: red; }
where 'body' is a selector for your table's parent
But classes are most likely the right way to go here.
I think, It will work.
.Myclass tr td:first-child{ }
or
.Myclass td:first-child { }