如何解決表格自動滾動效果中body部分超過表頭才消失的問題？

表格自動滾動：解決內容溢出表頭的問題

在製作表格自動滾動效果時，經常會遇到一個棘手的問題：表格主體內容滾動超出表頭才消失，影響視覺效果和用戶體驗。本文將分析問題根源並提供CSS解決方案。

問題：內容溢出表頭

使用動畫實現表格自動滾動時，表格主體（tbody）可能會滾動超過表頭（thead）才消失，如下圖所示：

（圖示：滾動時表格行在超過表頭後依然可見）

以下是一個示例代碼：

編號	鋼平	規格	區域	庫位號
1	1000	22	A	121

/*表格滾動動畫*/
@keyframes table {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

.table tbody {
  animation: table 10s infinite linear;
}

分析問題根源

問題在於tbody元素的動畫導致其內容超出表格容器的可視區域。 tbody的overflow: hidden屬性無效，因為它只作用於tbody自身內容，而非整個表格。

解決方案：CSS樣式調整

為了防止tbody內容溢出表頭，我們需要調整.table和.table thead的CSS樣式：

 /*表格滾動動畫*/
@keyframes table {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

.table {
  overflow: hidden; /* 隱藏超出表格容器的內容*/
}

.table thead {
  position: relative; /* 使用相對定位*/
  z-index: 1; /* 提高層級，覆蓋tbody */
  background-color: #fff; /* 確保表頭背景色覆蓋滾動內容*/
}

.table tbody {
  animation: table 10s infinite linear;
}

通過將overflow: hidden應用於.table ，我們確保所有超出表格容器的內容都被隱藏。 同時，將.table thead設置為相對定位並提高z-index值，使其始終位於tbody之上，有效地遮蓋了溢出的內容。 添加background-color確保表頭背景顏色覆蓋滾動內容，避免出現縫隙。 這樣就解決了表格內容溢出表頭的問題，實現了乾淨整潔的自動滾動效果。

以上是如何解決表格自動滾動效果中body部分超過表頭才消失的問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！