CSS是樣式表語言中的一種,用來定義網頁元素的樣式,其中表格樣式是使用頻率很高的一種。下面通過幾個實例介紹如何使用CSS做表格樣式。
/* 實例一 */ table { border-collapse: collapse; } th, td { border: 1px solid #ccc; padding: 8px; text-align: center; } th { background-color: #f0f0f0; } /* 實例二 */ table { border-collapse: separate; border-spacing: 0; width: 100%; } th, td { border: 1px solid #ccc; padding: 8px; text-align: center; } th { background-color: #f0f0f0; } /* 實例三 */ table { border-collapse: collapse; width: 100%; } th, td { border: none; padding: 8px; text-align: center; } th { background-color: #f0f0f0; border-bottom: 1px solid #ccc; } td { border-bottom: 1px dotted #ccc; }
以上三個實例分別實現了不同的表格樣式,使用時根據實際需求進行選擇。實例一使用border-collapse屬性將表格邊框合并為一條線,添加了表頭背景色和單元格內邊距。實例二設置了表格的寬度為100%以適應不同屏幕大小,同時去除了單元格間隙。實例三則去除了表格邊框和單元格邊框,設置了表頭的下邊框和單元格的虛線下邊框。
下一篇css做邊框設計手抄報