将鼠标悬停在 table 的行上并在该行下方打开一行以获取更多详细信息

Question

我有以下 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>

和css

.action {
  display: none;
}

tr:hover .action {
  display: block;
}

当前结果显示，当用户将鼠标悬停在机场名称上时，文本内嵌显示：

我的objective：当用户将鼠标悬停在机场名称上时，他将在机场下方的一行中看到详细信息，它应该占用整个space.例如，将鼠标悬停在 JFK 上，您将获得：

Airport    Value
JFK        234

flight leaves on 13:20
Take the train from ABC

LAX        104

我希望 display: 块可以解决问题，但它偏向左侧。

Answer 1

首先，在css中添加一个“+”，如下所示；

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

然后，像这样更改您的 html 代码；

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

你可以试试这个demo。

Answer 2

当您使用 display: none/block 时，table 的布局会发生变化，因为当元素未显示时，其他标签之间没有为其分配 space。您可以改用 visibility: collapse。来自 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.

注意 <td colspan="2"> 以便行中的单个 td 跨越两列

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>

visibility: collapse/visible 之间的切换会立即发生，并且无法设置动画，因为它们之间没有任何步骤。如果该行在悬停时应该更平滑地显示，另一种方法是使用 line-height: 0/1 和 overflow: hidden 而不是

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>

将鼠标悬停在 table 的行上并在该行下方打开一行以获取更多详细信息

Hover on a table's row and open a row below the row for more details

html

css

html-table

hover

onhover