当 TD 上有边框时如何覆盖 TR 上的边框答案

【问题标题】：how to override a border on a TR when there is a border on a TD当 TD 上有边框时如何覆盖 TR 上的边框
【发布时间】：2013-03-03 21:47:03
【问题描述】：

鉴于以下情况，如何让 TR 边框覆盖 TD 边框。 !important 似乎没有奏效。 fiddle 是 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>

【问题讨论】：

标签： hover border html-table tablerow

【解决方案1】：

我在Fiddle 中使用了这个技巧，但没有单元格边框。我的 CSS 看起来像：

        * { 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;
            }

另一个有效的想法here 是为悬停边框提供 2px。

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

好的，所以解决方案是为单元格边框使用ridge边框类型：

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

【讨论】：

我知道，这是一个棘手的问题！我已经尝试了几件事。我需要 TD 的边框，所以这是个问题。我发现如果您将 TD 边框样式设置为 ridge 而不是solid，TR 的solid 将覆盖，这似乎工作得很好。看看（jsfiddle.net/rhKda/9）。这似乎是一个很好的解决方案，但它只有在边框为 1px 时才有效，就是这样！看看有没有其他建议，否则我会接受你的回答，因为已经接近了。
这是同一个有背景的，因为我打算使用它。 jsfiddle.net/rhKda/10
它适用于 IE9/10 (jsfiddle.net/rhKda/10)。我不确定以前的版本，但老实说，我不像以前那样担心 IE。我提示用户更换或升级旧版本的 IE。我想如果您需要旧版本，这可能是个问题。
我又做了一次尝试，这次使用了一点 javascript，它适用于所有浏览器和任何边框宽度。你会认为这会更容易。角落并不完美，但已经足够好了。 jsfiddle.net/rhKda/15