1

というクラスを追加して、複数のセルを強調表示するactive必要がありtdます。このクラスは、境界線の色を変更してセルを強調表示します。

ここでの問題は、特定のセルの上、右、下、左のセルが選択されている場合、実際には強調表示されていなくても、中央のセルが強調表示されているように見えることです。

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

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 class="active">3.2</td>
            <td>3.3</td>
            <td class="active">3.4</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td class="active">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;
    border-style:double
}

ここでは、セル 2.3、3.2、3.4、および 4.3 が強調表示されていますが、3.3 は強調表示されていませんが、視覚的には強調表示されているように見えます。

誰でもこの問題を解決する方法を提案できますか?

4

1 に答える 1

1

使用できます

table {
     table-layout: fixed;
     border-spacing: 2px;
     border-collapse: separate;
}

ただし、セルをパディングします。セルをパディングしたくない場合は、代わりに背景を使用してセルを強調表示できます。

デモ：

セルパディング付きのテーブル

セルが強調表示された表

于 2012-11-05T05:00:21.503 に答える