如何绕过表格行之间的小空间？答案

【问题标题】：How to get around the small space in between table rows?如何绕过表格行之间的小空间？
【发布时间】：2012-04-08 21:25:33
【问题描述】：

我正在使用 JQuery 构建带有表格单元格的菜单。现在这个 JQuery 是一个测试，如果我离开第一个单元格并且我没有进入第二个单元格，它应该只提醒“你好”。当我从第一个牢房进入第二个牢房时，它仍然会触发。我发现表的行之间有一个很小的空间，这导致 JQuery 认为我不在第二个单元格内。这是 JQuery...

$("#layer2_cell1").mouseenter(function() { 
$("#storage").data("2", "1");
});
$("#layer2_cell1").mouseleave(function() { 
$("#storage").data("2", "0");
});
$("#layer1_cell1").mouseenter(function() { 
$("#storage").data("1", "1");
});
$("#layer1_cell1").mouseleave(function() { 
$("#storage").data("1", "0");
var test1 = $("#storage").data("2");
if (!(test1 == "1")) {
alert("hello");
}
});

这里是一些html...

<table align="center" cellspacing="0">
<tr>
<td class="leftend" background="images/box_background.jpg">
</td>
<div id="test">
<td id="layer1_cell1" class="layer1" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Airplanes</b></font>
</td>
</div>
<td id="layer1_cell3" class="layer1" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Cars</b></font>
</td>
<td id="layer1_cell4" class="layer1" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Cell Phones</b></font>
</td>
<td id="layer1_cell2" class="layer1" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Televisions</b></font>
</td>
<td id="layer1_cell5" class="layer1" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Other</b></font>
</td>
<td class="rightend" background="images/box_background.jpg">
</td>
</tr>
<tr>
<td id="permanentlyhiddencell" class="leftend">
</td>
<td id="layer2_cell1" class="bottomcell" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Cessna</b></font>
</td>
<td id="layer2_cell2" class="layer2" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Mercedes Benz</b></font>
</td>
<td id="layer2_cell3" class="layer2" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>LG</b></font>
</td>
<td id="layer2_cell4" class="layer2" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>LG</b></font>
</td>
<td id="layer2_cell5" class="layer2" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Balloons</b></font>
</td>
</tr>

还有 css...

.layer1 {
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.layer2 {
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.bottomcell {
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.rightend {
border-top-right-radius:15px;
border-bottom-right-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 30px;
height:75px;
}
.leftend {
border-top-left-radius:15px;
border-bottom-left-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 30px;
height:75px;
}
.layer1 {
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.layer2 {
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.bottomcell {
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.rightend {
border-top-right-radius:15px;
border-bottom-right-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 30px;
height:75px;
}
.leftend {
border-top-left-radius:15px;
border-bottom-left-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 30px;
height:75px;
}

【问题讨论】：

如果没有您的 HTML 或 CSS 部分代码，真的很难分辨！你为什么不把你的代码放在 jsfiddle 中

标签： html jquery html-table menu cell

【解决方案1】：

“一张桌子不是菜单，所以不要把它当作一个菜单来使用”有资格作为解决这个问题的方法吗？否则，您的表 border-collapse: collapse; 的 CSS 可能会成功。

【讨论】：

@AllenHundley - 没有 HTML/CSS 很难知道尝试使用单元格间距，将其设置为 0。border-collapse 应该做同样的事情。但说真的，肯定有比表格更好的方法来做到这一点......也许是嵌套的无序列表？
添加了css和html。这有帮助吗？
@AllenHundley 我认为问题可能只是事件的顺序。第一个单元格上的 mouseleave 事件在第二个单元格上的 mouseenter 之前触发。由于 JavaScript 是单线程的，因此您仍在 mouseleave 处理程序中，数据尚未更改。
好吧，我试着把它换了。依然没有。我认为这是表格行之间的小空间。我之所以发现这一点，是因为我在悬停时将指针变为手指，如果我走得很慢，我可以看到鼠标在再次变成指针之前变回默认值。

【解决方案2】：

我想我可以<tbody> 来解决这个问题。我只是用<tbody> 标签包围了我所有的行，并给了它一个ID。 <tbody> 标签只包围未隐藏的标签，所以在 JQuery 中我只是做了一个事件，如果光标离开 <tbody>

【讨论】：