html中表格折叠显示,html – 如何突出显示边框折叠折叠的表格单元格的4个边框...

我想突出显示类活动的单元格的边框.

问题是表的border-collapse属性设置为折叠,这将隐藏单元格的顶部和左侧边框(最左侧和顶部行单元格除外).这导致一个问题,即突出显示类(活动)不突出显示顶部和左侧边框.

你可以找到问题here.

HTML

1.1	1.2	1.3	1.4	1.5
2.1	2.2	2.3	2.4	2.5
3.1	3.2	3.3	3.4	3.5
4.1	4.2	4.3	4.4	4.5
5.1	5.2	5.3	5.4	5.5

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

}

});

我正在研究的解决方案之一是隐藏活动单元格左侧单元格的右边界和顶部单元格的边界底部.

我对解决方案不太满意,因为在单击单元格时应用并删除了活动类.在这里,我的解决方案需要找到prev单元格和顶部单元格,并在其中应用/删除相应的类.

您可以找到建议的解决方案here.

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