CSS固定列是指在表格中固定某一列始終顯示在屏幕的左側或右側,以便用戶瀏覽其他列時該列仍然可見。下面是通過CSS實現固定列的示例:
table { width: 100%; border-collapse: collapse; } thead th { background-color: #f5f5f5; border-right: solid 1px #ddd; } tbody td { border-right: solid 1px #ddd; } tbody td:first-child { position: sticky; left: 0; z-index: 1; background-color: #fff; border-right: none; }
上面的代碼首先定義了一個表格,其中thead和tbody分別用于定義表頭和表格主體。然后,使用CSS為表頭th和表格主體td設置了樣式,包括背景顏色和右邊框。最后,為表格主體中的第一列td設置了position: sticky和left: 0,使其固定在左側。
需要注意的是,CSS固定列的支持情況因瀏覽器而異。目前,支持CSS固定列的瀏覽器有Chrome(Version 56+)、Firefox(Version 52+)、Safari(Version 10.1+)和Edge(Version 16+)。在使用CSS固定列時,應該給出替代方案,以便在不支持固定列的瀏覽器上也能夠顯示表格。