I have the following table:

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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The switch between visibility: collapse/visible will happen instantly and can not be animated since there are no steps in between. If the row should show up more smoothly on hover, an alternative way would be to use 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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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.