Hover 在表格的行上并在该行下方打开一行以获取更多详细信息

Question

I have the following table:

DEMO:

<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>

and css

.action {
  display: none;
}

tr:hover .action {
  display: block;
}

Current result shows that when the user hover over the airport name the text appears inline:

My objective : when user hover over the airport name, he will see detail information in a line BELOW the airport and it should take the entire space. Example, hover over JFK you will get:

Airport    Value
JFK        234

flight leaves on 13:20
Take the train from ABC

LAX        104

I was hoping that the display: block will do the trick but it comes to the left.

Answer 1

First of all, add a "+" in css as following given;

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

Then, change your html codes like this;

<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>flight leaves on 13:20 Take the train from ABC</td>
    </tr>
    <tr>
      <td>LAX</td>
      <td>104</td>
    </tr>
  </tbody>
</table>

You can try it on this demo .

Answer 2

When you use display: none/block the layout of the table will change, because when the element is not displayed, there is no space allocated for it between the other tags. You can use visibility: collapse instead. From the MDN docs

The collapse keyword has different effects for different elements:

For <table> rows , columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.

Notice the <td colspan="2"> so that the single td in the row spans over 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>