在網站開發過程中,表格是經常用到的元素之一。不過,設計一個美觀、簡潔又實用的表格并不容易。這時,CSS表格就可以派上用場了。CSS表格可以方便地進行表格的排版、樣式設計,還可以使表格更加響應式,適應不同屏幕的大小。 如果你需要一個簡單、易于使用的CSS表格,那么可以考慮使用一些免費的CSS表格模板。這些模板已經經過優化,擁有漂亮的樣式和布局,同時也具有靈活的自定義選項。
/* 定義表格樣式 */ table { width: 100%; border-collapse: collapse; margin-bottom: 1em; background-color: #f8f8f8; } th, td { padding: 0.4em; text-align: left; border: 1px solid #ddd; } th { background-color: #eee; } /* 定義表格斑馬線樣式 */ tr:nth-child(odd) { background-color: #f2f2f2; } /* 定義響應式表格樣式 */ @media (max-width: 600px) { table { border: 0; } thead { display: none; } tr { margin-bottom: 1em; background-color: #f8f8f8; border: 1px solid #ddd; } td:before { content: attr(data-label); float: left; font-weight: bold; } }
以上是一個示例的表格樣式代碼。你可以將這段代碼在你的網站上應用,也可以在此基礎上進行自定義調整。這樣,你就可以快速地創建一個漂亮、實用的表格,為網站提供更好的用戶體驗。