1

鉴于以下情况，我如何让 TR 边界覆盖 TD 边界。 !important似乎没有奏效。小提琴就在这里。

<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>
4

1 回答 1

2

我在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;
            }

另一个可行的想法是为 Hover 边框提供 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);
}
于 2013-03-15T08:49:07.100 回答