如何使用CSS样式给上面的代码中的表格美化
时间: 2024-02-18 13:03:23 浏览: 195
css美化表格,实际中效果
4星 · 用户满意度95%
可以使用以下CSS代码来美化上面的表格:
```CSS
table {
border-collapse: collapse; /* 边框合并 */
width: 100%;
max-width: 1200px;
margin: 20px auto;
font-size: 14px;
line-height: 1.5;
text-align: center;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 10px;
border: 1px solid #ccc;
}
th {
font-weight: bold;
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
```
将上述样式添加到style标签或外部的CSS文件中,即可美化表格。注意,如果是添加到外部的CSS文件中,还需要将HTML代码中的style属性删除。
阅读全文