首页html5设计一个响应式表格，实现表格的鼠标指针悬停和斑马线效果

html5设计一个响应式表格，实现表格的鼠标指针悬停和斑马线效果

时间: 2024-03-21 21:44:33 浏览: 118

可以使用以下代码实现一个响应式表格并添加悬停和斑马线效果： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Responsive Table</title> <style> table { border-collapse: collapse; width: 100%; max-width: 800px; margin: 0 auto; font-family: Arial, sans-serif; font-size: 14px; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover { background-color: #f5f5f5; } tr:nth-child(even) { background-color: #f2f2f2; } @media screen and (max-width: 600px) { table { font-size: 12px; } th, td { padding: 4px; } } </style> </head> <body> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>28</td> <td>Male</td> </tr> <tr> <td>2</td> <td>Jane</td> <td>22</td> <td>Female</td> </tr> <tr> <td>3</td> <td>Bob</td> <td>35</td> <td>Male</td> </tr> <tr> <td>4</td> <td>Sara</td> <td>19</td> <td>Female</td> </tr> </tbody> </table> </body> </html> ``` 在上述代码中，使用了CSS的border-collapse属性来合并表格边框，使用了max-width属性来控制表格的最大宽度，使用了@media查询来控制在小屏幕设备上的字体大小和单元格内边距。使用:hover伪类来为表格行添加鼠标悬停效果，使用:nth-child伪类来为隔行添加斑马线效果。

阅读全文