邊框樣式不適用於黏性位置元素
黏性定位是一個方便的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中文網其他相關文章!