將滑鼠懸停在表格的行上并在該行下方打開一行以獲取更多詳細資訊-有解無憂

我有下表：

將滑鼠懸停在表格的行上并在該行下方打開一行以獲取更多詳細資訊

我的目標：當用戶將滑鼠懸停在機場名稱上時，他將在機場下方的一行中看到詳細資訊，它應該占據整個空間。例如，將滑鼠懸停在 JFK 上，您將獲得：

Airport    Value
JFK        234

flight leaves on 13:20
Take the train from ABC

LAX        104

我希望 display: 塊會起作用，但它出現在左側。

uj5u.com熱心網友回復：

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

該崩潰的關鍵字有不同的元素不同的效果：

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

uj5u.com熱心網友回復：

首先，在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>

您可以在此演示中試用。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/364587.html

標籤：html css html-table 徘徊悬停

上一篇：將2個按鈕與文本右側對齊

下一篇：中心選單、中心圖片、html、css