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

Posted 2023-03-06

【中文标题】将鼠标悬停在表格的行上并在该行下方打开一行以获取更多详细信息

【英文标题】：Hover on a table's row and open a row below the row for more details

【发布时间】：2022-01-02 08:22:09

【问题描述】：

我有下表：

DEMO:

<table class="table">
  <thead>
    <tr>
      <th>Airport</th>
      <th >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;

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

我的目标：当用户将鼠标悬停在机场名称上时，他会在机场下方的一行中看到详细信息，并且应该占据整个空间。例如，将鼠标悬停在 JFK 上，您将获得：

Airport    Value
JFK        234

flight leaves on 13:20
Take the train from ABC

LAX        104

我希望 display: 块可以解决问题，但它在左边。

【问题讨论】：

对于创建子行的简单方法，我会查看DataTables。附上的链接是如何初始化子行

【参考方案1】：

当您使用display: none/block 时，表格的布局会发生变化，因为当元素不显示时，其他标签之间没有为其分配空间。您可以改用visibility: collapse。来自MDN docs

collapse关键字对不同的元素有不同的效果：

对于<table>行、列、列组和行组，行或列被隐藏并且它们本来占用的空间被移除（如同显示：没有应用于表格的列/行）。但是，仍会计算其他行和列的大小，就好像折叠的行或列中的单元格存在一样。此值允许从表中快速删除行或列，而无需强制重新计算整个表的宽度和高度。

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

tr.action 
visibility: collapse;

tr:hover + tr.action 
visibility: visible;

<table class="table">
  <thead>
    <tr>
      <th>Airport</th>
      <th >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>

【讨论】：

@ProcolHarum 很高兴能提供帮助！即使第一个解决方案已经解决了挑战，我只是添加了另一种动画方式......

【参考方案2】：

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

.action 
  display: none;

tr:hover + .action 
  display: block;

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

<table class="table">
  <thead>
    <tr>
      <th>Airport</th>
      <th >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上试试。

【讨论】：

谢谢。如何在不拉伸整个表格的情况下获得下面的一行？

因为您的文字而拉伸。用 将其分隔并描述第一列的宽度约为 170px，就像你给第二列一样。