Question 240991 in CSS Question posted in
Some basic documentation can be found here.

CSS: giving precedence to class applied to TR over styling applied TD (tables)

Is there a way for the class applied to the TR element of a table to override the styling applied to the TD?

td {
    border: 1px dotted #d6d6d6;
}

.tr {
    border-bottom: 1px solid #ff0000 important;
}

In the above CSS code, what should I do so that the .tr class (applied to certain TR elements) overrides the td styling?

Tags:

2

Answers


  1. 0

    Here’s the corrected CSS code to override the styling applied to the td:

    td {
    border: 1px dotted #d6d6d6;
}

.tr td {
    border-bottom: 1px solid #ff0000 !important;
}
    Login or Signup to reply.
  2. 0

    Actually, border-bottom is more specific than border property. So, without using a class simply you could use td again and it would still work and override.

    td{
    border: 1px dotted #d6d6d6;
}

td{
    border-bottom: 1px solid #ff0000;
}
    <table>
    <tr class="tr">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search