Hovering over a td tag and adding a border using CSS can cause the entire table to

While experimenting on a coding platform:

<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 using this styling:

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

The intention was to achieve a subtle popping effect on the td element, but an undesired wavy motion occurs when hovering the mouse up and down the column. How can I eliminate this peculiar behavior?

htmlcsshoverborderhtml-table

Answer №1

You have the option to use outline instead of the border property, which may be more suitable for this specific situation

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

Demo

Have you ever wondered why using the border property results in that offset? Understanding the CSS Box Model reveals that the border is calculated outside the element rather than inside, causing your element to shift on hover.

To resolve this issue, there are several approaches one can take, including using a transparent border color to preserve the border space like so:

Demo

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

Answer №2

Check out this Demo Fiddle!

Give this a try:

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

The issue with the 'pop' effect is that the width of the border is added on hover, disrupting the alignment of other table cells. To solve this, set the padding on a cell to be equal to the width of the border you want to apply, then remove it on hover. This way, the border will seamlessly fill the space without affecting the table structure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can anyone recommend a user-friendly JavaScript dialog box compatible with jQuery that is mobile-responsive?

Mobile browsers. Using Jquery dialog alert box. Avoiding the use of alert() due to its unattractive appearance in web browsers. In the process of creating a website for both mobile and web platforms, seeking a dialog box that is compatible with both. ...

javascriptjquerycssbrowsermobile

Using flexbox auto margin within nested elements: A guide

Is it possible to achieve consistent margins between the heading and list items using flexbox? section { display: flex; background: #eee; } h1 { background: #bbb; } ul { display: flex; flex: 1; list-style-type: none; background: #ccc; ...

cssflexbox

Sidebar Masonry - Use Bootstrap for a Unique Layout

My goal is to have the page divided into 4 rows, with Masonry aligning the posts within 3 rows and a sidebar displayed on the right. However, I am facing an issue where Masonry mixes everything up and does not allow me to have a sidebar at the right. HTML ...

jqueryhtmltwitter-bootstrapjquery-masonrymasonry

Retrieve all data points if both latitude and longitude are present in the XML dataset

XML data to retrieve details <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <results> <result> <Country_Code>IN</Country_Code> <Country_Name>India</Country_Name> <Region_Nam ...

javascripthtmlxmlxpath

Issues with Font-Face Implementation

Hey there! I'm currently working on incorporating a new font into my website using font-face. However, it seems like something might be missing from my code because the style isn't being applied correctly. Here is what I have so far: <div id= ...

htmlcss

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

How can I modify the code to prompt the user for their location only when they click on a specific button, and then show all markers on the map? This jsfiddle illustrates the current issues: Google map loads markers from a database, and the user is asked b ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

The font color fails to change when hovering over

I'm experiencing an issue with the styling of my input box. When the user starts typing, a div containing a list of possible clubs is displayed. Currently, I am having trouble with the .clubLink:hover class and its background color. CSS: <style& ...

jqueryhtmlcss

Excess space located adjacent to primary content on website

When you scroll to the left of the page, next to the main content and outside of the browser width, there is additional space occupied only by the background of the Body CSS. Take a look at the site in action: . @charset "utf-8"; /* Custom CSS Styles * ...

htmlcss

What is the most effective method for managing the onSelect data within the select tag in Angular's reactive form functionality?

Can someone please advise on the best approach to handling this scenario? I have a form with multiple fields, including a select tag. <form [formGroup]="myForm"> <select formControlName="" > <option *ngFor="let c of countries" value ...

javascripthtmlangularangular8

active option in Opencart 2.1 is set to "selected"

I've implemented the AJAX module d_quickcheckout to speed up the checkout process on opencart 2.1 (not the default one). However, I'm encountering an issue with a field in the payment address section that is always pre-selected with the region/st ...

javascripthtmlajaxopencartopencart2.x

Dragging and arranging elements outside the main container is possible with drag-and

Imagine we have a div grid for an inventory that is 128x512px. I am looking to make all the (item 64x64px) divs draggable so they can be snapped onto the grid by dragging them. Inside the inventory, the divs must also be sortable without the use of lists ...

jqueryhtmljquery-ui-sortabledrag

Implementing a Variety of Textures and Images in a Three.js Scene

I am utilizing THREE.js to showcase a 3D spinning globe in the web browser. Along with that, I intend for an image to display around the rotating globe. Despite attempting to use the provided function, var img = new THREE.ImageLoader(); img.load("texture/ ...

javascriptjqueryhtmlthree.js

Angular 1.5 component using HTTP GET

Trying to utilize a 1.5 component with AngularJS has presented some challenges for me. I have a service that fetches my JSON file using $HTTP and returns a promise. In the controller of my component, I resolve the promise and assign it to a value using thi ...

javascripthtmlangularjs

Create a visual representation by converting it into an HTML table

Check out my JSFiddle here: http://jsfiddle.net/0r16e802/4/ I'm attempting to display an image as an HTML table, but I'm facing two major issues with my algorithm: Only the first image is loaded in the first row and I need to figure out how to ...

javascriptjqueryhtmlcss

The Highcharts Range Selector feature may encounter issues when used with multiple series

Currently, I am facing an issue with my highchart/highstock where I retrieve data from a PHP file. The problem arises when I attempt to use multiple series as the RangeSelector Buttons cease to function properly. For instance, in the example provided, the ...

javascriptphphtmlchartshighcharts

Variation in `th` & `td` Width in Table

Is it possible to have different widths for th and td, such as 50px for th and 500px for td? To address this issue, I am utilizing datatable. To enable others to help me, here is a simple code snippet: .abc { width: 500px; } .def { width: 50px; } ...

htmlcss

PHP processing and converting to a string output

I have a PHP page (content.php) that includes plain HTML and content accessed via PHP variables <html> <head> </head> <body> <h1><?php echo $title; ?></h1> </body> </html> ...

phphtml

Retrieve information from a SQL database table and present the output in an HTML table format

I am trying to display the result of a query to a remote ODBC SQL database in an HTML table using PHP. I have successfully established the connection with the database, but when I attempt to execute a query and display it in a table, nothing appears. I am ...

phphtmlmysqlodbc

I need to figure out how to nest a div inside of a ul-li-a and ensure that the text inside the

In my search button, I have a cached list of options. When I select one, it should trigger the menu and choose the correct option. However, I am having trouble comparing the innerText of a div with the selected option from the search area. Both a and div e ...

javascriptjqueryhtmljquery-ui

optimal application of css with jquery

I have a question about using jQuery to set the padding of a class or id. I am able to successfully change the height of an element with this code: $('.menu').css({ height: '90px' }); But now, I need to apply a specific CSS rule in jQ ...

javascriptjqueryhtmlcss