我要通过向active
添加名为td
的类来突出显示多个单元格。此类将更改边框颜色以突出显示单元格。
这里的问题是如果选择了特定单元格的顶部,右侧,底部和左侧单元格,那么即使实际没有突出显示中心单元格,也会突出显示中心单元格。
您可以找到问题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,但在视觉上它似乎突出显示。
有人可以提出解决这个问题的方法吗?
答案 0 :(得分:1)
您可以使用
table {
table-layout: fixed;
border-spacing: 2px;
border-collapse: separate;
}
然而,它会填充细胞。如果您不希望细胞填充,您也可以使用背景突出显示细胞。
演示: