CODEWITHSUNDEEP
hoverborderhtml-tabletablerow
Jim
Jim

Reputation: 16002

how to override a border on a TR when there is a border on a TD

Given the following, how do I get the TR border to override the TD border. !important doesn't seem to do the trick. The fiddle is here.

<head>
        <style>
            * { font-family: tahoma; }
                table { 
                    border-collapse: collapse; 
                    background-color: rgb(202,217,234);
                }
                table td {
                    font-size: 12pt;
                    padding: .5rem;
                    border: 1px solid rgb(079,129,189);
                }
                table tr:hover {
                    border: 1px solid crimson !important;
                }
                *#first { border: 1px solid black; }

        </style>
<body>

        <table>
                <col id="first" />
                <col id="second" />
                <col id="third" />
                <thead>
                        <tr><th>A</th><th>B</th><th>C</th></tr>
                </thead>
                <tbody>
                        <tr>
                                <td>One</td><td>Fred</td><td>Jim</td>
                        </tr>
                        <tr>
                                <td>Two</td><td>Demo</td><td>Item</td>
                        </tr>
                        <tr>
                                <td>Three</td><td>Foo</td><td>Bar</td>
                        </tr>
                </tbody>
        </table>

</body>
</head>

Upvotes: 2

Views: 2018

Answers (1)

JoDev
JoDev

Reputation: 6873

I do the trick in the Fiddle, but without cells border. My CSS look like:

        * { font-family: tahoma; }
            table { 
                border-collapse: collapse; 
                background-color: rgb(202,217,234);
            }
            *#first { border: 1px solid black; }
            *#second, *#third {
                border: 1px solid rgb(079,129,189);
            }
            table td {
                font-size: 12pt;
                padding: .5rem;
            }

            table tr:hover {
                border: 1px solid crimson;
            }
             table tr:hover td {
                border: none;
            }

Another idea here which works find, is to give 2px for the Hover border.

            /*Adding this*/
            table tr {
               border: 1px solid rgb(079,129,189);
            }                
            /* Changing this*/
            table tr:hover {
                border: 2px solid crimson;
            }

Ok, so the solution is to use the ridge border type for cells border:

table td {
   font-size: 12pt;
   padding: .5rem;
   border: 1px ridge rgb(079,129,189);
}

Upvotes: 2

Related Questions