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

私はフィドルでトリックを行いますが、セルの境界はありません。私の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;
            }

ここでうまくいくもう1つのアイデアは、ホバーの境界線に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 に答える