CODEWITHSUNDEEP
csssasscss-tables
Bando
Bando

Reputation: 57

table row style overridden by td style css

EDIT3: http://jsfiddle.net/ZgTHa/

Basically I have a table with an 1px solid grey border containing a radio button in each row. I apply an 1px red border on the row which is selected via the radio button. The color doesn't change. But if I set the red border to 2px, it changes.

I think this has to do with some priority issues, meaning that if both borders are 1px and both are solid, the td applies, if the td border is dotted, then the solid one applies for the chosen row. same situation if the selected row has a larger border width then the td.

I think this is just how it is in css (I might be wrong and missing something here) but I was wondering how one can work around this issue with relative ease (I could set a background image and put no borders and such, but that seems drastic)

edit (an example of what I'm trying to say):

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-collapse

if you add a "red-border" class on one of the tr like so:

<tr class="red-border">

and specify the red-border class style like so:

.red-border {
    1px solid red;
}

it doesn't apply. But if you add:

.red-border {
    2px solid red;
}

it does apply. same goes if you set the td border to dotted:

table, td, th
{
    border:1px dotted black;
}

and keep the red border as 1px solid red, it does apply.

ill just work around it with styling the tds with specific classes which get added on the click event. I'm just curious if this is how its intended to work or am I missing something?

edit2:

i have applied the styles like so:

.red-border {            
                background-color: #fbfafa !important;
                color: #571c20;
                .first {
                    border-left: 1px solid #571c20 !important;
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                }
                .second {
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                }
                .third {
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                }
                .fourth {
                    border-top: 1px solid #571c20 !important;
                    border-bottom: 1px solid #571c20 !important;
                    border-right: 1px solid #571c20 !important;
                }
            }

it still doesn't apply sometimes. It applies well for the first row, on the second row the top border doesn't apply, same for the third row. On another table the right border doesn't apply.

Upvotes: 1

Views: 6241

Answers (3)

Ilya Chernov
Ilya Chernov

Reputation: 431

There is another way to accomplish what you want. Instead of setting style for tr you can set styles for tr's children elements — td's. Since you've got classes for the first td and the last one, you don't even have to use pseudo-classes for that. For example left border looks like that:

tr.red-border td.first {
  border-left: 1px solid red;
}

Here is the complete example: http://jsfiddle.net/htn1cjoq/. I didn't change your html, only the css part. Hope it helps.

Upvotes: 1

Bando
Bando

Reputation: 57

seems i have found the anwser:

.red-border {
    border: 1px double red;
}

im guessing the double style resolves the conflict between the tr and td borders.

Upvotes: 1

user1721135
user1721135

Reputation: 7092

Not all styles will work for tr elements, like border for instance

tr

You can however easily style the table element or the td elements.

If you want a border add it to the tds.

Example:

http://jsbin.com/avihuc/1/edit

td {
  border:solid black 1px;
}

If you want higher "priority" (its actually called specifity)

use something like this:

table tr td {
}

wins over

tr td {}

As a rule of thumb for specifity,

ID selecotrs are worth 100 times more than elements selectors. Classes are worth 10 times more than element selectors.

!important is super specific and can be used as a last resort.

Upvotes: 1

Related Questions