3

CSSを使用してテーブルを強調表示する方法について、以前に質問しました。JavaScriptテーブルの境界線が適切に見えるようにするのに苦労しています。

たとえば、テーブルの境界線では、余白を に設定しました0。列にカーソルを合わせると、境界線のサイズが大きくなると、テーブル全体がわずかに「ジャンプ」します。これを防ぐために、表のセルのサイズを変更しようとしましたが、違いはありません。

ここに画像の説明を入力 ここに画像の説明を入力

ここで JSFiddle の問題を説明しています: http://jsfiddle.net/grNr8/6/。これらの画像では少しわかりにくいですが、フィドルが問題を示していることを願っています。

私CSSは次のとおりです。

table, td {
    background-color: white;   
    border: 0px solid white;
    border-collapse: collapse;   
}

列を強調表示すると、ピクセルの太さの境界線2が選択されます。$('td').css({height: '29px'});を使用して(および から変更して)セル サイズを変更して実験してみまし26 - 29たが、効果は変わりません。Javascript私が強調するために使用しているのは、主に以前の質問への回答に基づいています。

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').first().addClass('highlightedTop');
    $('td:nth-child(' + t + ')').addClass('highlighted')
    $('td:nth-child(' + t + ')').last().removeClass('highlighted').addClass('x');

    $('td').css({
        height: '39px'
    });

    if (t > 1) {
        var t1 = t - 1;
        $('td:nth-child(' + t1 + ')').addClass('highlightedPrev');
        $('td:nth-child(' + t1 + ')').last().removeClass('highlightedPrev');

    }
}, function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted ');
    $('td:nth-child(' + t + ')').first().removeClass('highlightedTop');
    $('td:nth-child(' + t + ')').last().removeClass('highlightedBottom');
    $('td:nth-child(' + t + ')').last().removeClass('x');
    if (t > 1) {
        var t1 = t - 1;
        $('td:nth-child(' + t1 + ')').removeClass('highlightedPrev');
    }
});​

よりスムーズに表示するためにセルのサイズを変更することは可能ですか、それとも別のアプローチを使用する必要がありますか? の白い境界線の厚さを使用して実験し1pxましたが、角に奇妙な結合があり、端に非対称の境界線ができてしまいます。

4

5 に答える 5

4

アウトラインがうまくいかない場合は、デフォルトの状態で 2px の実線の透明な境界線を使用することもできます。

table, td {
    background-color: white;   
    border: 2px solid transparent;
    border-collapse: collapse;   
}

http://jsfiddle.net/grNr8/7/

于 2012-11-21T21:47:56.703 に答える
1

ホバー時にテーブル セルを境界線のように見える透明な png でオーバーレイできますか?

于 2012-11-21T21:37:56.860 に答える
1

TD に DIV を配置し、代わりに DIV のスタイルを設定します。DIV のサイズを操作して境界線を許可することはできますが、テーブル セルを許可することはできません。

于 2012-11-21T21:38:26.570 に答える
0

ボーダーがなくてボーダーを追加すると、物事がめちゃくちゃになります。代わりに、境界線があり、その色を変更すると、結果ははるかに良くなります。控えめに言っても、ジャンプはありません。あなたの JSFiddle の例があなたが本当にやりたいことを表している場合 (それは単色の背景色の td です)、それが私がすることです。

.a{background-color: red; border: 2px solid red; }
.b{background-color: green; border: 2px solid green;}
.c{background-color: orange; border: 2px solid orange;}

完全な例を参照してください: http://jsfiddle.net/grNr8/9/

于 2012-11-21T21:58:53.880 に答える
0

私の意見では、常に境界線を使用し、色のみを変更するのが最も簡単です。解決策は非常に単純なので、質問の詳細を見逃したと思います。

フィドル

.a{
    background-color: red;
    border: 2px solid red;
}
.b{
    background-color: green;
    border: 2px solid green;
}
.c{
    background-color: orange;
    border: 2px solid orange;
}
于 2012-11-21T22:00:13.080 に答える