CODEWITHSUNDEEP
htmlcsshoverborderhtml-table
user2405469
user2405469

Reputation: 2003

border on td tag on hover using css moves whole table

I was testing this on fiddle:

<table>
    <tr>
        <td class="changeme">something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
    </tr>
    <tr>
        <td class="changeme">something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
    </tr>
    <tr>
        <td class="changeme">something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
    </tr>
    <tr>
        <td class="changeme">something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
        <td>something</td>
    </tr>
</table>

and this css:

.changeme:hover {
    border:outset;
    cursor:pointer;
}

I just wanted to create a little popping out like effect on the td tag but it has this weird wavy effect when you run the mouse up and down the column, how could I remove that?

Upvotes: 2

Views: 2581

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157324

You can also use outline instead of border property, which would suit better in this particular scenario

.changeme:hover {
    outline:2px solid #f00;
    padding:2px;
    cursor:pointer;
}

Demo

Why using border causes that offset? If you are aware of CSS Box Model, the border is counted outside the element instead of inside, and thus it shakes your element on hover.

enter image description here

There are various ways to solve this issue, one can also use transparent border color to reserve the border space like

Demo

.changeme{
    padding:2px;
    border: 2px solid transparent;
}
.changeme:hover {
    border:2px solid #f00;
    padding:2px;
    cursor:pointer;
}

Upvotes: 6

SW4
SW4

Reputation: 71150

Demo Fiddle

Try doing:

.changeme{
    padding:2px;
}
.changeme:hover {
    border:2px outset;
    padding:0;
    cursor:pointer;
}

The 'pop' is happening because the width of the border is being added on hover, offsetting the other table cells. To counteract this, set padding on a cell the same as the width of the border you wish to apply, then remove on hover. The border will then fill this space seamlessly, keeping the table structure in place.

Upvotes: 3

Related Questions