How to highlight 4 borders of a table cell with border-collapse collapse

Question

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

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.

You can find the problem here.

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');
        }
    });

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.

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?

Answer 1

Define border-style:double. Write like this:

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

Check this http://jsfiddle.net/2ahfP/18/

Answer 2

Try this instead:

td.active {
    outline: 1px solid blue;
}

The difference between outline and border is that outline won't add to the elements total width or height. Also the border-collapse property won't affect the outline.