CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
Kyle Krzeski
Kyle Krzeski

Reputation: 6527

Odd border around html table cell with colspan?

My question is similar to THIS question, but I'm unable to use divs instead of colspans with a table.

It appears to be an issue that only appears in chrome, but I need to find a workaround.

My use case is very similar to the one below. Notice how the top border for 3.3 spans two columns, which is clearly not right. In my use case, the user is able to change which cells are merged so I can't set the border for a specific cell.

How do you set a cell's border to be confined to its own cell instead of sharing with a common cell whose colspan is greater than 1?

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 colspan="2">2.3</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

var fnActivate = function(target) {
    target.addClass('active');

    if(!target.is(':first-child')) {
        target.prev().addClass('brdr-r-hide')
    }

    var tr = target.closest('tr');
    if(!tr.is(':first-child')) {
        var prevTr = tr.prev();
        $('td', prevTr).eq($('td', tr).index(target)).addClass('brdr-b-hide');

    }
};

var fnDeactivate = function(target) {
    target.removeClass('active');

    if(!target.is(':first-child')) {
        target.prev().removeClass('brdr-r-hide')
    }

    var tr = target.closest('tr');
    if(!tr.is(':first-child')) {
        var prevTr = tr.prev();
        $('td', prevTr).eq($('td', tr).index(target)).removeClass('brdr-b-hide');

    }
}

$('table').on('click', 'td', function(e){
        var target = $(e.currentTarget);

        if(e.ctrlKey && target.hasClass('active')){
            fnDeactivate(target);
        } else if(e.ctrlKey) {
            fnActivate(target);
        } else {
            fnDeactivate($('table td.active'));
            fnActivate(target);
        }

    });

CODE: Plunkr

Upvotes: 0

Views: 1812

Answers (2)

phil
phil

Reputation: 456

I think this usecase is best adressed with the outline css property. See: http://jsfiddle.net/4zxv4o59/

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

Outlines do not take up space, they are drawn above the content.

from https://developer.mozilla.org/en/docs/Web/CSS/outline

Upvotes: 3

Kyle Krzeski
Kyle Krzeski

Reputation: 6527

Issue was fixed by using: 

table {
  border-collapse: separate;
}

Code: Plunkr

It's a little different on the front end as each cell now has its own border of 1px, but it's a good workaround for the time being.

Upvotes: 3

Related Questions