Table Column Highlight on the Hover

Table Row Column Highlight on Hover:

Table column highlighting effect not required always sometimes it’s required. This effect is a little tricky but you can use row hover effects in an easy way. If you know after before in deep then it’s simple and also here presented in an easy way. You can understand with given example below:


You can use copy and paste this code:

HTML Code:

<table width="500" border="1">

    <tbody>

        <tr>

            <th>Sr</th>

            <th>Name</th>

            <th>City</th>

        </tr>

        <tr>

            <td>1</td>

            <td>Raj</td>

            <td>Kanpur</td>

        </tr>

        <tr>

            <td>2</td>

            <td>NanaPate</td>

            <td>Mumbai</td>

        </tr>

        <tr>

            <td>3</td>

            <td>Divya</td>

            <td>Rurkee</td>

        </tr>

    </tbody>

</table>

CSS Code:

<style>

    table {

        overflow: hidden;

        border-collapse: collapse;

    }

    td,

    th {

        position: relative;

    }

    table td:hover:after {

        background: #eee;

        content: '';

        position: absolute;

        width: 100%;

        height: 10000px;

        left: 0;

        top: -5000px;

        z-index: -1;

    }

    table td:hover:before {

        background: #f5f5f5;

        content: '';

        position: absolute;

        width: 10000px;

        height: 100%;

        left: -5000px;

        top: 0;

        z-index: -1;

    }

</style>