Hover 在表格的行上並在該行下方打開一行以獲取更多詳細信息

Question

我有下表：

演示：

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

當前結果顯示，當用戶 hover 覆蓋機場名稱時，文本顯示為內聯：

我的目標：當用戶 hover 超過機場名稱時，他會在機場下方的一行中看到詳細信息，它應該占據整個空間。 例如，通過 JFK 的 hover 您將獲得：

Airport    Value
JFK        234

flight leaves on 13:20
Take the train from ABC

LAX        104

我希望 display: block 能解決問題，但它在左邊。

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>

你可以在這個演示上試試。

Answer 2

當你使用display: none/block時，表格的布局會改變，因為當元素不顯示時，其他標簽之間沒有為它分配空間。 您可以改用visibility: collapse 。 來自MDN 文檔

collapse關鍵字對不同的元素有不同的效果：

對於<table>行、列、列組和行組，行或列被隱藏，並且它們本來占用的空間被刪除（就像 display: none 應用於列/行桌子）。 但是，仍會計算其他行和列的大小，就好像折疊的行或列中的單元格存在一樣。 此值允許從表中快速刪除行或列，而無需強制重新計算整個表的寬度和高度。

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