CODEWITHSUNDEEP
htmlcsscss-tables
Chris Bolton
Chris Bolton

Reputation: 2926

Border on hover on table elements messing up standard width/height

I have a table (a calendar) and have a CSS hover on each of the td elements. I'm putting a border on this hover, but it messes up the width and height of the cells (i.e. the new border will push the next row slightly further down, etc.)

Any ways around this?

Upvotes: 1

Views: 370

Answers (3)

L0j1k
L0j1k

Reputation: 12635

CSS is notorious for doing this, as "border" properties are not added into the total height of an object. It behaves like margins. What you can do is to add a few margin rules to your <td> selector in your CSS file:

td.hoverable {
  border:1px solid #00F;
  margin:-1px;
}

So that when you hover, the new "margin" rule also takes effect, thereby reducing the area of the <td> by 1px, which should allow the border to show.

EDIT: Whoops, yes. I meant margin:-1px; :) Thanks!

Upvotes: 0

Derik
Derik

Reputation: 843

You could (if the hover is not smoothed by transition) have a padding on the box (lets say 5px) and on the hover you could add 2px of border and make the padding 3px, so it would still be with the 5px distance from the end of the box.

Upvotes: 1

AturSams
AturSams

Reputation: 7952

You can work around by having a border on all td elements with the same color as the td background and only changing the color (instead of the width) of the border to get a very similar effect to the one you originally designed without messing width and height.

The original border will be invisible to the user because it's color matches the background.

Upvotes: 2

Related Questions