Is there a way to reveal the full contents of a cell when hovering the mouse, even if it has overflow hidden?

I am facing an issue with tables that contain long strings as values. Is there a way to display the entire content of a table cell if the overflowing content is hidden?

I thought about expanding the cell while overlapping adjacent cells without displacing them.

Currently, I am using the following CSS:

table{
  table-layout: fixed;
  margin-top: 24px;

  th{
    white-space: normal;
    word-wrap: break-word;
  }

  td{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  td:hover{
    overflow: visible;
    z-index: 1;
    background-color: grey;
  }
}

This code successfully makes the overflowing text visible and allows it to overlap adjacent cells. However, the background/cell color does not follow along.

Any tips or suggestions would be greatly appreciated. Thank you!

htmlcss

Answer №1

Here is my solution for your specific situation: jsFiddle

To start, I made some changes to the CSS by isolating the table selector from other selectors. (Note: This step may not be necessary if you are using SASS or LESS as mentioned in the comments.)

table{
  table-layout: fixed;
  margin-top: 24px;
} <--- insert here instead of at the end of the css rules for the table

th{
  white-space: normal;
  word-wrap: break-word;
}

I also made adjustments to the CSS rules for 'td' and 'td:hover':

td{
  max-width : 50px; 
  white-space : nowrap;
  overflow : hidden;
}

td:hover{
  overflow: visible;
  z-index: 2;
  background-color: grey;
  max-width:initial;
}

I hope this meets your requirements as intended.

UPDATE

Based on feedback and your preference to prevent adjacent cells from moving, I have created an alternative version: jsFiddle

(Please note that there might still be a slight jumping effect on hover, which could require further refinement by someone with more expertise.)

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

"Verifying in Javascript results in the inclusion of the item in

Can you check out this checkbox... <input type="checkbox" name="num" id="1" value="1" class="input-hidden" /> <input type="checkbox" name="num" id="3" value="3" class="input-hidden" /> <input type="checkbox" name="num" id="6" value="6" c ...

javascriptphphtml

What is the best way to connect a CSS file to a jade document?

Having some trouble linking normalize.css while using socket and express. html head title= "Real time web chat" link(href='/css/normalize.css') script(src='/chat.js') ...

cssnode.jsexpresspug

How can I create the effect of text changing color automatically after a specified time period has elapsed

I am currently dealing with a timer that is functioning properly, but I have a specific CSS inquiry. Essentially, what I would like to achieve is when the timer hits 30 seconds, I want the numbers to change to red color. $(function () { var $startTimer = ...

javascriptjquerycss

What could be the reason for the unexpected outcome when checking if display is equal to "none"?

I have a JavaScript function called "display()". I want to hide my navigation menu on click, but it is not working properly - it just blinks. I am looking for a solution that uses only JavaScript and does not involve querySelector. function display() { ...

javascripthtmlcss

Unable to alter fxFlex property within Component using "setAttribute('fxFlex', '25%')" does not function properly in Angular 6

Currently, I am utilizing the flexLayout module to create responsive divs in my Angular application. You can find more information about flexLayout at https://github.com/angular/flex-layout and also at https://alligator.io/angular/flex-layout/. const nav ...

htmlangulartypescriptfrontendangular-flex-layout

Unique design Radio Button Inputs with Custom CSS Styling and Enhanced Accessibility for Voice Controls

On my website, I have implemented custom radio buttons using this model: The custom radio buttons are working well with various browsers and are accessible with Jaws. However, I encountered an issue when trying to use Voice Over as the radio button canno ...

jquerycssradio-buttonaccessibilityvoiceover

The vanishing HTML Div with a fixed height

After implementing a navigation bar inside my header container, I noticed that the main_image div with a blue background color disappeared. Despite setting a height for it, the div was nowhere to be seen. Additionally, the welcome_text div seemed to lose i ...

csshtmlheight

Creating a div that functions as a scrollbar controller

I am in search of a unique way to customize the scrolling functionality on my application, resembling more of a navbar that scrolls. However, I have not been able to find any existing plugins that meet my specific requirements. My inquiry includes: Whic ...

javascriptjqueryhtmlscrollbarnavigationbar

Manipulating video volume using JavaScript injection

My web page includes a video, and I have successfully used JavaScript injection to control the play/pause functionality. Now, I am looking to also adjust the volume based on percentage. How can I create a function that decreases or increases the volume acc ...

javascripthtmljavascript-injection

Updating the total on the Infusionsoft order form can be achieved using either Jquery or custom code

Is there a way to automatically calculate and update the total amount on the order form based on user input in two quantity fields? The price should increase as the user adjusts the quantity. I've been searching for a solution, but haven't found ...

htmljqueryinfusionsoft

Is it possible to conceal an error message while another error message is being shown?

<form name="form"> <input type="password" placeholder="Password" ng-model="password" name="password" minlength="6" maxlength="15" ng-pattern="/^\S*$/" required> <span ng-show="form.password.$dirty && form.password.$in ...

htmlangularjs

Utilizing Timer Control for Image Rotation in Presentations

I have two sets of images named Div1 and Div2 that need to be displayed in a slideshow. The condition is as follows: For the first seven days, I want the images from the first set, Div1, to appear in the slideshow. Once the seven days are over, the images ...

c#htmlsqlasp.nettimer

As I scroll down, my content hovers over my navbar

My website loads with everything in the right place, but as soon as I start scrolling, the content moves onto the navbar and hides at the top of the screen. I want the navbar to remain at the top of the screen at all times and have the content hidden under ...

htmlcssscrollnavbarbootstrap-5

Utilizing the GET method within a form

I'm currently working on testing a form to ensure that my input values are being submitted correctly. At this point, I haven't set up any server script yet. However, I was hoping that upon clicking submit, I would be able to see my values appende ...

jqueryhtml

Can we use Selenium to extract text from a webpage that is not present in the HTML but is instead fetched from an API response?

There is text in the text field, but the HTML isn't displaying it. Check out the Text field with HTML. Can Selenium extract the text "test" if it is retrieved from an API? ...

javahtmlapiselenium-webdrivertextfield

Leverage the power of DOMXPath in combination with the query function

Here is a snippet of HTML code to work with: <ul id="tree"> <li> <a href="">first</a> <ul> <li><a href="">subfirst</a></li> <li><a href=""> ...

phphtmlxpathdomdocument

What is the best way to apply margins to a nested div element in relation to its parent div element using CSS?

My Coding Dilemma: #b { width: 700px; height: 150px; margin-top: 10%; margin-left: 20%; text-align: center; border: 2px solid black; } .block { width : 10%; height : 10%; border: 2px solid black; padding: 40px 40px; margin: inheri ...

javascripthtmlcss

Leveraging Bootstrap column classes with diverse div heights

Currently, I am working on a layout design using Bootstrap 3 that involves eight text divs. These divs have almost the same height, but some are slightly taller depending on the screen width. My goal is to arrange them into three columns on desktop and th ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the most effective method for tracking file upload progress using SSE?

I am currently working on creating a file upload progress feature that is compatible with older browsers using AJAX. In HTML5, there is the xhr.upload.progress event which works well for modern browsers, but I need an alternative for non-XHR2 browsers. I h ...

ajaxhtmlfile-uploadprogressserver-sent-events

How can you align a div next to another using the float property in CSS?

/*Custom Styling for Divs*/ #box1 { border: 1px solid; border-radius: 25px; width: 900px; } #box2 { border: 1px solid; border-radius: 25px; width: 430px; } #box3 { float: right; border: 1px solid; border-radius: ...

htmlcss