5

class を持つセルの境界を強調表示したいと思いますactive。

問題は、テーブルのborder-collapseプロパティが に設定されて いることcollapseです。これにより、セルの境界線が非表示にtopなりleftます(左端と最上行のセルを除く)。これにより、highlight class( active) が境界線topを強調表示しないという問題が発生しています。left

ここで問題を見つけることができます。

HTML

<div style="padding: 10px">
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td class="active">2.3</td>
            <td>2.4</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td>4.4</td>
            <td>4.5</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
            <td>5.4</td>
            <td>5.5</td>
        </tr>
    </table>
</div>

CSS

table {
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
}

td {
    border: 1px solid lightgrey;
    height: 60px;
    width: 60px;
    text-align: center;
    vertical-align: middle;
}

td.active {
    border: 1px solid blue;
}

td.brdr-b-hide {
    border-bottom: none;
}
td.brdr-r-hide {
    border-right: none;
}

Javascript

$('table').on('click', 'td', function(e){
        var target = $(e.currentTarget);

        if(e.ctrlKey && target.hasClass('active')){
            target.removeClass('active');
        } else if(e.ctrlKey) {
            target.addClass('active');
        } else {
            $('table td.active').removeClass('active');
            target.addClass('active');
        }
    });

私が取り組んでいる解決策の 1 つはborder-right、セルの左側のactiveセルとborder-bottom上部のセルの を非表示にすることです。

activeセルをクリックするとクラスが適用および削除されるため、このソリューションにはあまり満足していません。ここで私のソリューションは、prevセルとトップセルを見つけて、対応するクラスをそれらに適用/削除する必要があります。

ここで提案されたソリューションを見つけることができます。

私の質問は、この問題を処理するより良い方法はありますか?

4

2 に答える 2

19

border-style:doubleを定義します。次のように書きます。

td.active {
    border: 1px solid blue;
    border-style:double;
}

これをチェックしてくださいhttp://jsfiddle.net/2ahfP/18/

于 2012-11-02T12:59:53.670 に答える
3

代わりにこれを試してください：

td.active {
    outline: 1px solid blue;
}

アウトラインとボーダーの違いは、アウトラインは要素の幅または高さの合計に追加されないことです。また、border-collapse プロパティはアウトラインには影響しません。

于 2012-11-02T12:52:37.013 に答える