带有colspan的html表格单元格周围的奇怪边框？答案

【问题标题】：Odd border around html table cell with colspan?带有colspan的html表格单元格周围的奇怪边框？
【发布时间】：2017-11-09 05:33:37
【问题描述】：

我的问题类似于THIS 问题，但我无法在表格中使用 div 而不是 colspans。

这似乎是一个只出现在 chrome 中的问题，但我需要找到解决方法。

我的用例与下面的非常相似。请注意 3.3 的顶部边框如何跨越两列，这显然是不正确的。在我的用例中，用户可以更改合并的单元格，因此我无法为特定单元格设置边框。

如何将单元格的边框设置为仅限于自己的单元格，而不是与 colspan 大于 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);
        }

    });

代码：Plunkr

【问题讨论】：

标签： javascript jquery html css html-table

【解决方案1】：

问题已通过使用解决：

table {
  border-collapse: separate;
}

代码：Plunkr

在前端有点不同，因为每个单元格现在都有自己的 1px 边框，但目前这是一个很好的解决方法。

【讨论】：

【解决方案2】：

我认为这个用例最好使用outline css 属性来解决。见：http://jsfiddle.net/4zxv4o59/

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

大纲不占用空间，它们绘制在内容之上。

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

【讨论】：