CSS表格是Web頁面的基本組成部分,而固定表格的列則更方便展示相關數據。這里就介紹如何使用CSS來固定表格的第一列。
table { border: 1px solid black; border-collapse: collapse; table-layout: fixed; width: 100%; } td, th { border: 1px solid black; padding: 5px; text-align: center; } tr td:first-child { position: sticky; left: 0; background-color: white; }
以上代碼演示了如何使用selector “tr td:first-child”來選擇表格中的第一列,然后使用CSS的position屬性使其固定于左側。在實現固定表格列之前,需要注意的是,寬度為百分比的表格列無法使用該方法固定。
以上演示的表格樣式設置便能讓表格的第一列保持固定狀態,無論滾動條如何滾動,都會一直固定在屏幕左側。可以根據具體需求修改CSS樣式,完成更豐富高效的展示。