[英]Using cellspacing and border-collapse:collapse cuts cell borders
[英]How to highlight 4 borders of a table cell with border-collapse collapse
我想突出显示类active
的单元格的边框。
问题是表的border-collapse
属性设置为collapse
,这将隐藏单元格的top
和left
边框(最左侧和顶部行单元格除外)。 这导致一个问题,即突出显示类( active
)不突出显示top
和left
边框。
你可以在这里找到问题。
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-right
的左侧的细胞的active
细胞和border-bottom
顶部的细胞。
我对解决方案不太满意,因为在单击单元格时应用并删除了active
类。 在这里,我的解决方案需要找到prev
单元格和顶部单元格,并在其中应用/删除相应的类。
您可以在此处找到建议的解决方案。
我的问题是,有没有更好的方法来处理这个问题?
定义border-style:double 。 像这样写:
td.active {
border: 1px solid blue;
border-style:double;
}
试试这个:
td.active {
outline: 1px solid blue;
}
轮廓和边框之间的区别在于轮廓不会添加到元素的总宽度或高度。 此外,border-collapse属性不会影响轮廓。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.