鼠标悬停表格区域外时右侧出现额外列的问题解决咨询

先帮你揪出问题根源：你现在用了嵌套表格的结构——把实际的两列表格塞进了另一个外层表格的单个<td>里，再加上内外层表格都设了width:75%，当鼠标滑到外层<td>的空白区域（也就是内层表格没填满的部分）时，.expCode td:hover的背景样式会让这部分看起来像一列额外内容，这就是你看到的“莫名多出来的列”。

要搞定这个问题，其实很简单，只需要两步：

1. 删掉多余的嵌套结构 #

那个外层的.expCode表格完全是多余的，直接把内容表格的class改成expCode就行，没必要多套一层表格。

2. 统一样式设置 #

把原本给外层表格的样式直接应用到内容表格上，顺便加上border-collapse: collapse让边框合并得更整齐，避免出现多余的间隙。

修改后的完整代码： #

CSS 代码

tr.even { background-color: #FFFFFF; }
tr.odd { background-color: #EEEEEE; }
.expand b{ font-size:30px; }
.xhide { }
.expCode td:hover { background-color: #ddd; }
.expCode th { 
  padding-top: 12px; 
  padding-bottom: 12px; 
  text-align: center; 
  font-size:16px; 
  background-color: #276B8E; 
  color: #FFFFFF; 
}
.expCode{ 
  border-color:grey; 
  width:75%; 
  border-collapse: collapse; /* 合并边框，避免间隙 */
}

HTML 代码

<table class="expCode" border="1" cellspacing="0">
  <thead>
    <tr>
      <th style="width:25%">Column1</th>
      <th style="width:50%">Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="even">
      <td>Text</td>
      <td><p>Text</p></td>
    </tr>
    <tr class="odd">
      <td> Text</td>
      <td><p>Text</p></td>
    </tr>
    <tr class="even">
      <td>Text</td>
      <td><p>Text</p></td>
    </tr>
  </tbody>
</table>

这样改完之后，鼠标悬停时只会触发实际表格单元格的背景变化，再也不会出现那种“额外列”的视觉假象了。

内容的提问来源于stack exchange，提问作者Deepika Bansal