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.
Related
I want to change the background color of all td in a tr just using a class in the tr. I am using the following css
tr .yellow td{
background-color: yellow;
}
And I have following html
<tr class="yellow"><td></td> <td></td></tr>
But the background color is not changing. What is the mistake here?
You have a space before the class in your CSS declaration
tr.yellow td{
background-color: yellow;
}
You need to remove the space to indicate that the class is on the <tr> element. Without it you are suggesting that the hierarchy is:
tr, then something with a class of "yellow", then a td
e.g.
<tr>
<sometag class="yellow">
<td>
Which isn't what your DOM looks like.
I have an HTML document where I have two different tables. One is class Alpha and one is class Beta. I want to assign this css to class Beta only...
td
{
border-style:solid;
border-top:thick double #ff0000;
}
I can not figure out how to assign this only to Beta. Does anyone know how?
Just apply the .beta class selector to the entire table and change your CSS code to apply a rule only to td decedents of .beta like this:
<table class="beta">
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
.beta td {
border-style:solid;
border-top:thick double #ff0000;
}
If you need to apply the rule to multiple elements within .beta simply add an additional selector like this:
.beta td,
.beta th {
border-style:solid;
border-top:thick double #ff0000;
}
Qapla'!
CSS lets you get specific with what elements rules are to be applied to. Just add this rule to the table.Beta td cell declaration and you're done.
table.Beta td
{
border-style:solid;
border-top:thick double #ff0000;
}
I have created a page which is a login portal to three separate websites. On this page, I have displayed the three login portals to said websites. I am trying to style it all with css and as few classes as possible (I need to fine tune my css skills).
What I have created is a table with three rows and two columns called loginPortals:
<table class="loginPortals">
<tbody>
<tr>
<td>Picture 1</td>
<td>Login form 1</td>
</tr>
<tr>
<td>Picture 2</td>
<td>Login form 2</td>
</tr>
<tr>
<td>Picture 3</td>
<td>Login form 2</td>
</tr>
</tbody>
</table>
I've only just begun the styling of the table, so it's very incomplete, however I'm struggling already. This is simplified, because I don't know exactly how it's going to look. Basically though, I want a border of some sort appearing between each row. The following doesn't quite achieve this as I had wanted:
.loginPortals{
width:100%;
}
.loginPortals tbody:first-child td{
border-top:1px solid #000;
}
.loginPortals tbody tr td{
border-bottom:1px solid #000;
padding:1em 0;
}
The first-child selector isn't working as I had thought it would. It is applying the top border to all the cells in all the rows. This is causing the line thickness to double in the middle of the rows.
How do I fix this so that the top border is only applied to the top row without creating extra classes or applying any inline style.
Thank you!
Joe
Your table borders need to be set to collapse:
.loginPortals{
width:100%;
border-collapse: collapse;
}
You can then omit the :first-child rule and just apply top and bottom borders for all your rows:
.loginPortals tbody tr td{
border-top:1px solid #000;
border-bottom:1px solid #000;
padding:1em 0;
}
Also, just for your information, this selector:
.loginPortals tbody:first-child td
Means:
Select any td element
within a tbody
that is the first child of its parent.
And not:
Select any td element
within the first child of a tbody.
So since the tbody is the first and only child of .loginPortals, all the td elements in all their tr parents will be selected. See this answer for a visual explanation. You probably wanted this selector:
.loginPortals tbody tr:first-child td
But that's not necessary because all you have to do is collapse your table borders.
If I understand correctly, you have 3 forms and only want two lines - that's what I took from I want a border of some sort appearing between each row if that's the case, try this.
.loginPortals tr:first-child td{
border-top:none;
}
.loginPortals tbody tr td{
border-top:1px solid #000;
padding:1em 0;
}
http://jsfiddle.net/u4v3Z/
I believe this would work...
td {border-top:1px solid #000;}
First of all, if you want to improve your CSS skills you should immediately stop using tables for layout.
Second, the :first-child pseudo class affects elements that are the first child of their parents. So since you only have one tbody element and it is the first child of the table writing tbody or tbody:first-child will yield the same results.
Edit: I think what you might be after here is tr:first-child td (you only want the table cells in the first table row to have a top border).
To solve your problem you could just go with border-bottom on all tds, unless you need a border in the top as well in which case you could set that border on the actual table or you could give all the tds a border-top and border-bottom. This of course renders a double border as you describe, but you can make the borders of a table collapse using border-collapse: collapse.
So in short: table {border-collapse: collapse}. But don't use tables for layout.
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).
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,