5

我想突出显示具有类的单元格的边界active。

问题是表格的border-collapse属性设置为 collapse，这将隐藏单元格的top和left边框（最左边和顶行单元格除外）。这导致了一个问题，即突出显示类（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');
        }
    });

我正在研究的解决方案之一是隐藏border-right单元格左侧的active单元格和border-bottom顶部的单元格。

我对解决方案不太满意，因为active单击单元格时会应用和删除该类。在这里，我的解决方案需要找到prev单元格和顶部单元格，并向它们应用/删除相应的类。

您可以在此处找到建议的解决方案。

我的问题是，有没有更好的方法来处理这个问题？

4

2 回答 2

19

定义边框样式：双。像这样写：

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 回答