1

我必须通过添加一个名为activeto的类来突出显示多个单元格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 回答