Select a row on a table to reveal additional information in the row directly underneath

Question

Select a row on a table to reveal additional information in the row directly underneath

I am presenting the following table:

<table class="table">
  <thead>
    <tr>
      <th>Airport</th>
      <th width="150px">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td div class='action'>flight leaves on 13:20<br>Take the train from ABC</td> 
      <td>JFK</td> 
      <td>234</td>      
    </tr>
    <tr>
      <td>LAX</td>
      <td>104</td>
    </tr>
  </tbody>
</table>

along with some custom CSS styling

.action {
  display: none;
}

tr:hover .action {
  display: block;
}

Currently, when hovering over the airport name, a text appears inline like this: https://i.sstatic.net/5Ocze.png

The goal: When hovering over an airport name, detailed information should be displayed in a line below the airport taking up the entire space. For example, hovering over JFK should show:

Airport    Value
JFK        234

flight leaves on 13:20
Take the train from ABC

LAX        104

I initially tried using the display: block property, but it didn't align properly.

html css html-table hover onhover

Answer 1

Answer №1

By using display: none/block, you can alter the layout of a table as the element's space is not allocated when it's not displayed among other tags. An alternative approach is to utilize visibility: collapse as suggested in the MDN documentation

The behavior of the collapse keyword varies for different elements:

For <table> rows, columns, column groups, and row groups, hiding the row(s) or column(s) eliminates their occupied space (similar to applying display: none). However, the dimensions of other rows and columns are recalculated as though the cells in the concealed row(s) or column(s) are present. This technique allows for quick elimination of a row or column without triggering a full table width and height recalculation.

Note the use of <td colspan="2"> ensures that the single td spans across both columns

tr.action {
visibility: collapse;
}
tr:hover + tr.action {
visibility: visible;
}

<table class="table">
  <thead>
    <tr>
      <th>Airport</th>
      <th width="150px">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JFK</td> 
      <td>234</td>      
    </tr>
    <tr class="action">
      <td colspan="2">flight leaves on 13:20 Take the train from ABC</td>
    </tr>
    <tr>
      <td>LAX</td>
      <td>104</td>
    </tr>
  </tbody>
</table>

The transition between visibility: collapse/visible occurs instantly without any intermediate steps, making animation impossible. To achieve a smoother appearance upon hover, an alternate method could be to employ line-height: 0/1 and overflow: hidden instead

table {
  line-height: 1.2;
  border-collapse: collapse;
}
tr.action td {
  line-height: 0;
  overflow: hidden;
  padding-block: 0;
  transition: all 300ms;
}
tr:hover + tr.action td {
  padding-block: 1;
  line-height: 1.2; /*same as table line-height*/
}

<table>
    <tr>
      <td>hover me!</td>
    </tr>
    <tr class="action">
      <td>I'm showing up more smoothly</td>
    </tr>
    <tr>
      <td>next row</td>
    </tr>
  </table>

Answer 2

By using display: none/block, you can alter the layout of a table as the element's space is not allocated when it's not displayed among other tags. An alternative approach is to utilize visibility: collapse as suggested in the MDN documentation

The behavior of the collapse keyword varies for different elements:

For <table> rows, columns, column groups, and row groups, hiding the row(s) or column(s) eliminates their occupied space (similar to applying display: none). However, the dimensions of other rows and columns are recalculated as though the cells in the concealed row(s) or column(s) are present. This technique allows for quick elimination of a row or column without triggering a full table width and height recalculation.

Note the use of <td colspan="2"> ensures that the single td spans across both columns

tr.action {
visibility: collapse;
}
tr:hover + tr.action {
visibility: visible;
}

<table class="table">
  <thead>
    <tr>
      <th>Airport</th>
      <th width="150px">Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JFK</td> 
      <td>234</td>      
    </tr>
    <tr class="action">
      <td colspan="2">flight leaves on 13:20 Take the train from ABC</td>
    </tr>
    <tr>
      <td>LAX</td>
      <td>104</td>
    </tr>
  </tbody>
</table>

The transition between visibility: collapse/visible occurs instantly without any intermediate steps, making animation impossible. To achieve a smoother appearance upon hover, an alternate method could be to employ line-height: 0/1 and overflow: hidden instead

table {
  line-height: 1.2;
  border-collapse: collapse;
}
tr.action td {
  line-height: 0;
  overflow: hidden;
  padding-block: 0;
  transition: all 300ms;
}
tr:hover + tr.action td {
  padding-block: 1;
  line-height: 1.2; /*same as table line-height*/
}

<table>
    <tr>
      <td>hover me!</td>
    </tr>
    <tr class="action">
      <td>I'm showing up more smoothly</td>
    </tr>
    <tr>
      <td>next row</td>
    </tr>
  </table>

Answer 3

Answer №2

To start, include a "+" in your CSS code like this;

.activity {
  display: none;
}
tr:hover + .activity {
  display: block;
}

Next, update your HTML structure as shown below;

<table class="table">
  <thead>
    <tr>
      <th>City</th>
      <th width="150px">Population</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>New York City</td> 
      <td>8,398,748</td>      
    </tr>
    <tr class="activity">
      <td>Explore Central Park and visit museums</td>
    </tr>
    <tr>
      <td>Los Angeles</td>
      <td>3,990,456</td>
    </tr>
  </tbody>
</table>

Feel free to test it out on this demonstration.

Answer 4

To start, include a "+" in your CSS code like this;

.activity {
  display: none;
}
tr:hover + .activity {
  display: block;
}

Next, update your HTML structure as shown below;

<table class="table">
  <thead>
    <tr>
      <th>City</th>
      <th width="150px">Population</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>New York City</td> 
      <td>8,398,748</td>      
    </tr>
    <tr class="activity">
      <td>Explore Central Park and visit museums</td>
    </tr>
    <tr>
      <td>Los Angeles</td>
      <td>3,990,456</td>
    </tr>
  </tbody>
</table>

Feel free to test it out on this demonstration.

Select a row on a table to reveal additional information in the row directly underneath

Answer №1

Answer №2

Similar questions

"Mute printing of a PDF file that is integrated within the document

Position the Facebook Like Button in alignment with the counts box

Having trouble with Bootstrap form-inline stacking issue, any tips on how to stop them from stacking?

Showing information retrieved from a database using PHP in a sequential manner

Exploring Angular 4: A deep dive into routing and ensuring responsiveness

Changing the color of your device's background

Element with absolute position does not expand along with scrollable content (over 100%)

List items that are not in any particular order spilling over onto the next

What is the reason for the additional space and irregular alignment of my divs when utilizing the 960 grid system?

Steps to display the datatable footer on the printed page

How can I extract information from an HTML element using its ID in JavaScript?

The directive for Content Security Policy in Django framework

JavaScript and CSS animations out of sync in terms of timing

Enable a button or class to dynamically alter its color

Activating an HTML button based on a specific condition

Can CSS content be used to showcase an .html document or .html fragment?

Concealing and revealing content using JQuery based on user input in

Difficulty arises when trying to merge a dropdown menu with a horizontally scrolling menu

The text and links should appear transparent against a gradient background; however, they are displaying in white

Submitting a particular entry in a form that has been dynamically generated through iteration