5

私は次のフィドルを持っています。

編集：行ボーダースタイルを適用して： 

table,th,td
{
    border:2px solid black;
    border-collapse:collapse;
}
tr:hover td
{
    background-color:grey;
    border-top: 2px solid rgb(10, 0, 255);
    border-bottom: 2px solid rgb(10, 0, 255);
}
td:hover
{
    background-color:rgb(214,214,214) !important;
    border:2px solid red !important;
    border-top: 2px solid red;
    border-bottom: 2px solid red;
}

私が求めているのは、ROWとCELLを強調することです。もともとは十字線のようなものを考えていましたが、列の背景色にはJavaScriptが必要で、当面は避けます。

この上で、ROW:hover背景色を暗くし、境界線を強調したいと思います。

そのtd:hover時は別の色になり、境界線は別の方法で強調されます。

FirefoxではなくChromeでチェックされています。

問題：を使用する必要があります!important。セルの境界線-左と上が赤に着色されていませんか？

では、を使用せずにCSSを記述important!し、TDセルの境界線のスタイルを修正する方法はありますか？

4

3 に答える 3

3

CSS（Javascriptなし）だけでオリジナルの十字線のアイデアを作成できます。::before強調表示には、および::after疑似要素を使用します。この方法ではFirefoxにわずかな問題があるので、修正を書きました。

border-collapse: collapse境界線を<tds>奇妙な方法で動作させます。<trs>代わりに、とに境界線を付けてください<cols>。border-collapse: collapseまた、エッジをカットします。これに対処するには、創造性を発揮し、すべての外側に余分な境界線を描画する必要が<tds>あり<ths>ます。さらに奇妙なことに、それは上部のピクセルと下部の2つのピクセルを「食べる」。したがって、境界線3pxを取得するには上に、2px境界線を取得4pxするには下に必要2pxです。

デモ： jsFiddle

CSS：

table {
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}
td, th, .row, .col, .ff-fix {
    cursor: pointer;
    padding: 10px;
    position: relative;
}
tr:last-child td {
    border-bottom: 4px solid black;
}
tr, col {
    border: 2px solid black;
}
th {
    border-top: 3px solid black;
}
th:last-child, td:nth-child(3n) {
    border-right: 4px solid black;
}
td:first-child, th:first-child {
    border-left: 3px solid black;
}
td:hover {
    border: 2px solid red;
}
td:hover:first-child {
    border-left: 3px solid red;
}
td:hover:nth-child(3n) {
    border-right: 4px solid red;
}
tr:last-child td:hover {
    border-bottom: 4px solid red;
}
td:hover::before,
.row:hover::before,
.ff-fix:hover::before { 
    background-color: #ffa;
    content: '\00a0';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -1;   
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

HTML：

<table>
    <col /><col /><col />
    <tr>
        <th class="col">First Name</th>
        <th class="col">Middle Name</th>
        <th class="col">Last Name</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Jeffery</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Marie</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Margie</td>
        <td>Ann</td>
        <td>Thatcher</td>
    </tr>
</table>

脚本：

function firefoxFix() {
    if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {
        var tds = document.getElementsByTagName( 'td' ),
            ths = document.getElementsByTagName( 'th' );
        for( var index = 0; index < tds.length; index++ ) {
            tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';                     
        };
        for( var index = 0; index < ths.length; index++ ) {
            ths[index].innerHTML = 
                  '<div class="' + ths[index].className + '">' 
                + ths[index].innerHTML 
                + '</div>';                     
            ths[index].className = '';
        };
        var style = '<style>'
            + 'td, th { padding: 0 !important; }' 
            + 'td:hover::before, td:hover::after { background-color: transparent !important; }'
            + '</style>';
        document.head.insertAdjacentHTML( 'beforeEnd', style );
    };
};

firefoxFix();
于 2013-03-08T09:12:54.947 に答える
1

あなたの例はうまく機能し、を使用する必要はありません!important。削除するborder-collapse: collapseと、（jsfiddle）が表示されます。

于 2013-03-07T11:56:40.127 に答える
1

より簡単な解決策は次のとおりです。次のスタイルをalltableに設定しtr、td：

border: 2px inset black;
border-collapse: collapse;
border-spacing: 0;

作るborder insetことはトリックをします。inset便利です：

親要素と子要素の両方に境界線がある場合、この手法では2つの境界線は取得されません（見苦しい）。これは、子要素が、はめ込みボックスの影の内側ではなく、はめ込みボックスの影の上にレンダリングされるためです。

参照： http： //makandracards.com/makandra/12019-css-emulate-borders-with-inset-box-shadows

実例： http： //jsfiddle.net/TR8Zg/146/

Chromeでうまく機能しています。ただし、IEとFireFoxでは、挿入効果が入力されます。したがって、それらの修正を見つける必要があります。

于 2015-01-20T09:34:53.700 に答える