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;
}
Related
In my website, text is dynamically appended to the page.
My need if the td has attribute has colspan=2, apply text-align:center.
tblCustomers tr td
{
padding-left:25px;
}
//how do I do this
tblCustomer tr td:hasattribute(colspan=2)
{
text-align:center;
}
Note:-
No suggestion for adding class or id. Its not feasible in my scenario.
No JavaScript or jQuery for this.
add this way
tblCustomers tr td {
padding-left:25px;
}
tblCustomers tr td[colspan="2"] {
text-align:center;
}
https://jsfiddle.net/nsse87c4/
add this style , make sure to define this tblCustomer class or id , for eg: I've put this as class
.tblCustomer tr td[colspan="2"]{
text-align:center;
}
in order to apply a style to all td's with a specific colspan, you can use the following selector:
td[colspan="2"]
or more specifically:
td[colspan="2"]{
text-align:center;
}
source: https://www.w3.org/TR/1998/PR-CSS2-19980324/selector.html
Attribute selectors
CSS2 introduced four attribute selectors:
…
[att=val]
Represents an element with the att attribute whose value is exactly "val".
Here is a solution
tblCustomer tr td[colspan="2"]
{
text-align:center;
}
Just added width: 100% to your table so you see visualize the effect properly.
.tblCustomer
{
width: 100%;
}
.tblCustomer tr td[colspan="2"]
{
text-align:center;
}
<table class="tblCustomer">
<tr>
<td colspan="2">Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
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.
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.
This is an example:
http://jsfiddle.net/Bq3AU/
I want nested table tr:first-child not to be red.
I know that I can use a code like:
table.calc table tr {
backgorund:none;
}
But this is only for one nested table. I want to write a css rule that colour only parent table row to be red.
I think it is something with '>' sign like table.calc > tr or something but I always had problems with '>'.
I think you cant use another class CSS for chiltable same that:
<table class="calc1">
<tr><td>title</td><td>title2</td></tr>
<tr>
<td>
<table class = "calc2">
<tr><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td></tr>
</table>
</td>
<td>
text
</td>
</tr>
<table>
CSS:
.calc1 tr:first-child {
background:red;
}
table td {
border:1px solid #000;
padding:10px;
}
.calc2 tr:first-child {
background:blue;
}
I think this is what you want, if not please clarify. I use white as a generic background color, you might choose another:
<style>
/*make all tables white */
table{
background:white;
}
/*make all first child tr's red*/
table tr:first-child{
background:red;
}
/*make all first child tr's that are part of child tables (not parents) white*/
table tr td table tr:first-child{
background:white;
}
/*so now only first child tr's of the top parent tables are red*/
</style>
I have the following CSS:
td: hover {
background-color:red;
}
td {
cursor: pointer;
background-color: rgb(150,150,150);
}
and my HTML is just:
<table>
<tr><td> </td></tr>
</table>
I can't get the hover to work. Why is that?
:hover is a pseudo-selector, and everything beginning with : is such (e.g. :active, :before etc.).
This can be confused with specifying values:
something: value;
So you need to think about pseudo-selectors as separate objects, not a value.
That's why you need to fix your td: hover so it looks like td:hover.
Note that if you put a space after td like so:
td :hover { ...
This is equal to:
td: *:hover { ...
and therefore will select all items descending from td and apply a style on hover to them (see this example).
Remember, spaces have a meaning in CSS.
You need to remove the space before :hover:
td:hover {
background-color: red;
}
You just need to remove the space between td :hover as the <td> has no descendants ..
td:hover will work
http://jsfiddle.net/xwYTa/