表格单元格突出显示（adjucent cells） - 引起误解

Question

我必须通过在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没有突出显示，但视觉它似乎被突出显示。

有人可以提出一种方法来解决这个问题吗？

Answer 1

您可以使用

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

然而，将垫细胞。如果你不想让你的单元格填充，你可以使用背景来突出显示单元格。

演示：

table with cell padding

table with cell highlight