CSS可以幫助我們制作出一些漂亮的表格樣式,讓網頁更加美觀,下面介紹一些常見的樣式。
/* 表格基本樣式 */ table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ccc; padding: 8px; text-align: left; } /* 隔行變色 */ tr:nth-child(even) { background-color: #f2f2f2; } /* 表頭樣式 */ th { background-color: #4CAF50; color: white; } /* 懸停效果 */ td:hover { background-color: #f2f2f2; } /* 圓角邊框 */ td:first-child { border-radius: 5px 0px 0px 5px; } td:last-child { border-radius: 0px 5px 5px 0px; }
上述代碼中,我們定義了表格的基本樣式,包括邊框折疊、寬度等。隔行變色可以讓表格更清晰。表頭樣式可以使用背景色和字體顏色區分表頭和正文內容。懸停效果可以增加一些交互性,用戶將鼠標懸停在單元格上時,背景色會變淺。最后,圓角邊框可以增加一些美觀性。
當然,這只是一些基礎的表格樣式,想要更加漂亮的樣式,還需要根據具體的場景進行設計。