表格單元格突出顯示（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