gpt4 book ai didi

html - 表格单元格突出显示(相邻单元格)- 误导

转载 作者:行者123 更新时间:2023-11-28 18:34:24 29 4
gpt4 key购买 nike

我必须通过向 td 添加一个名为 active 的类来突出显示多个单元格。此类将更改边框颜色以突出显示单元格。

这里的问题是,如果选择了特定单元格的顶部、右侧、底部和左侧单元格,那么中心单元格将看起来是突出显示的,即使它实际上并未突出显示。

可以找到问题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 class="active">3.2</td>
<td>3.3</td>
<td class="active">3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td class="active">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;
border-style:double
}

此处单元格 2.3、3.2、3.4 和 4.3 被突出显示,但 3.3 未突出显示,但在视觉上它似乎被突出显示。

谁能提出解决这个问题的方法?

最佳答案

你可以使用

table {
table-layout: fixed;
border-spacing: 2px;
border-collapse: separate;
}

但是它会填充单元格。如果您不想让单元格填充,您也可以使用背景来突出显示单元格。

演示:

table with cell padding

table with cell highlight

关于html - 表格单元格突出显示(相邻单元格)- 误导,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13225579/

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