首頁 > web前端 > css教學 > 為什麼邊框樣式不適用於黏性定位的表標題,如何修復它?

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

Patricia Arquette
發布: 2024-11-27 04:02:10
原創
413 人瀏覽過

Why Don't Border Styles Work on Sticky Positioned Table Headers, and How Can I Fix It?

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

黏性定位是一個方便的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 <td> or <th> in a row */
  border-left: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}
登入後複製

透過應用這些樣式,即使在滾動時邊框樣式也將保持可見表格滾動,保留黏性標題所需的設計。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板