CODEWITHSUNDEEP
javascripthtmlcss
Al Ex Tsm
Al Ex Tsm

Reputation: 2102

CSS: avoid skipping a row when moving cursor down table

When cells hide overflow and show it on hover if:

a) you are moving mouse cursor down descending rows

AND

b)the difference in height of the overflow of the cell you are on and the one you are going to is greater than the total height of overflow of the cell you are moving over on.

You will skip at least one row!

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/

Go to the column named "TEST" and try to go with the cursor from the cell of row 1 to the one on row 2 of the column "TEST"

Suggestions to avoid this behaviour without sacrificing the idea of single line rows that display all content on hover.

Upvotes: 1

Views: 60

Answers (1)

Roko
Roko

Reputation: 1335

I created a fiddle. Major change I had made was adding position: absolute

.superResponsive td:hover .content{
    background: black none repeat scroll 0 0;
    color: yellow;
    height: auto;
    overflow: visible;
    position: absolute;
    z-index: 4;
}

It's not perfect, but it's better than what you have.

Upvotes: 1

Related Questions