如何用边框折叠折叠突出显示表格单元格的4个边框 [英] How to highlight 4 borders of a table cell with border-collapse collapse

问题描述

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

I want to highlight the borders of cells having the class active.

问题是表格的边界崩溃属性设置为崩溃，这将隐藏 top 和左边界（最左边的和顶部的行单元格除外）。这引起了一个问题，即突出显示类（ active ）没有突出显示 top 和

The problem is the table's border-collapse property is set to collapse, which will hide the top and left border of cells(except for left most and top row cells). This is causing an issue whereby the highlight class(active) is not highlighting the top and left borders.

您可以找到问题此处。

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- 活动单元格左侧的单元格的右侧和 border-bottom 的底部

One of the solutions I'm working on is to hide the border-right of the cell in the left of the active cell and the border-bottom of the cell at the top.

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

I'm not so happy with the solution since the active class is applied and removed when a cell is clicked. Here my solution need to find the prev cell and the top cell and apply/remove the corresponding classes to/from them.

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

You can find the proposed solution here.

我的问题是，有没有更好的方法来解决此问题？

My question is, is there a better way to handle this problem?

推荐答案

定义 border-style：double 。这样写：

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

选中此 http://jsfiddle.net/2ahfP/18/

这篇关于如何用边框折叠折叠突出显示表格单元格的4个边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！