為什麼邊框樣式不適用於黏性定位的表標題，如何修復它？

邊框樣式不適用於黏性位置元素

黏性定位是一個方便的CSS 屬性，允許元素固定在頁面上的適當位置螢幕上，即使使用者向下捲動頁面。但是，當您嘗試將邊框樣式套用至黏性元素時，可能會出現複雜情況。

問題：

在提供的範例中，表頭設定為黏性和內聯邊框樣式已套用於

。元素。然而，當表格捲動時，邊框樣式不會出現，導致表頭沒有樣式。

原因：

因為使用 border- 而產生衝突 -崩潰：崩塌。使用此屬性，相鄰表格單元格的邊框會折疊並合併在一起。當與黏性標題結合使用時，合併的邊框在滾動時會遺失。

解決方案：

要解決此問題，您可以使用 border-collapse:separate，這可以防止邊界崩潰。此外，您應該自訂邊框以位於儲存格和標題的特定側。這確保了即使在滾動時邊框也保持附著和可見。

CSS 解決方案：

#wrapper {
  width: 100%;
  height: 150px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
}

table th {
  /* Apply both top and bottom borders to the <th> */
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table td {
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table th:first-child,
table td:first-child {
  /* Apply a left border on the first </th><td> or </td><th> in a row */
  border-left: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}<p>透過應用這些樣式，即使在滾動時邊框樣式也將保持可見表格滾動，保留黏性標題所需的設計。 </p>
</th>

以上是為什麼邊框樣式不適用於黏性定位的表標題，如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！