gpt4 book ai didi

html - 如何使用 border-collapse collapse 突出显示表格单元格的 4 个边框

转载 作者:搜寻专家 更新时间:2023-10-31 21:56:03 24 4
gpt4 key购买 nike

我想突出显示具有 active 类的单元格的边框。

问题是表格的 border-collapse 属性设置为 collapse,这将隐藏 topleft 单元格边框(最左边和最上面一行单元格除外)。这会导致突出显示类 (active) 未突出显示 topleft 边框的问题。

可以找到问题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');
}
});

我正在研究的解决方案之一是隐藏 active 单元格左侧单元格的 border-rightborder-顶部单元格的底部

我对这个解决方案不太满意,因为在单击单元格时会应用和删除 active 类。在这里,我的解决方案需要找到 prev 单元格和顶部单元格,并将相应的类应用于/从它们中删除。

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

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

最佳答案

定义border-style:double。像这样写:

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

检查这个http://jsfiddle.net/2ahfP/18/

关于html - 如何使用 border-collapse collapse 突出显示表格单元格的 4 个边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13195478/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com