当细胞隐藏溢出并在悬停时显示：
a）您将鼠标光标向下移动行
和
b）您所在的单元格溢出的高度与您要移动的单元格的溢出高度之差大于您正在移动的单元格的溢出总高度。
您将至少跳过一行！
HTML：
<div class="wrapper">
<table class="superResponsive">
<thead>
</tr>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>TEST</th>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>Col n</th>
<th>LAST</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td><div class="content">
<p>Some DataSome DataSome DataSome Data</p>
<p>Some DataSome DataSome DataSome Data</p>
<p>Some DataSome DataSome DataSome Data</p>
</div> </td>
<td>
<div class="content">
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
</div></td>
<td>
<div class="content">
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</td>
</div> <td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
</tr> <tr>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td><div class="content">
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
</div></td>
<td>
<div class="content">
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</td>
</div> <td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
</tr> <tr>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td><div class="content">
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
</div></td>
<td>
<div class="content">
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</td>
</div> <td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
</div> </td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
<td>
<div class="content">
<p>Some Data</p>
</div></td>
</tr>
</tbody>
</table>
</div>
CSS：
.superResponsive{
width:100%;
border-collapse:collapse;
}
.superResponsive td, .superResponsive th{
width:200px;
min-height:30px;
height:30px;
min-height:30px;
border:1px solid black;
vertical-align: top;
}
.content{
overflow: hidden;
width:200px;
min-height:30px;
height:30px;
min-height:30px;
}
.superResponsive td:hover .content{
background:lightGrey;
overflow: visible;
height:auto;
color:yellow;
}
http://jsfiddle.net/coolcatDev/r190r8hn/1/
转到名为“TEST”的列，尝试将光标从第1行的单元格转到“TEST”列的第2行
建议避免此行为而不会牺牲显示悬停时所有内容的单行行的想法。
答案 0 :(得分：1)
我创建了fiddle。
我做的主要更改是添加position: absolute
.superResponsive td:hover .content{
background: black none repeat scroll 0 0;
color: yellow;
height: auto;
overflow: visible;
position: absolute;
z-index: 4;
}
它并不完美，但它比你拥有的更好。