本文將介紹如何使用CSS制作圓角表格。跟隨以下步驟進行操作:
1. 創(chuàng)建一個HTML表格 <table> <tbody> <tr> <th>標題1</th> <th>標題2</th> </tr> <tr> <td>內(nèi)容1</td> <td>內(nèi)容2</td> </tr> </tbody> </table>
2. 添加樣式
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } th { background-color: #555; color: white; } tr:nth-child(even) { background-color: #f2f2f2; }
3. 添加圓角樣式
table { border: 6px solid #1673b1; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } th, td { border: 1px solid #1673b1; } th { background-color: #1673b1; color: white; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px 15px 0 0; } tbody tr:last-child td:first-child { -moz-border-radius: 0 0 0 15px; -webkit-border-radius: 0 0 0 15px; border-radius: 0 0 0 15px; } tbody tr:last-child td:last-child { -moz-border-radius: 0 0 15px 0; -webkit-border-radius: 0 0 15px 0; border-radius: 0 0 15px 0; } tbody tr:hover td { background-color: #bfe5f4; }
以上就是制作圓角表格的全部步驟。你可以根據(jù)需要修改表格的樣式。