CSS中如何设置表格线CSS中的表格线通常是通过在表格元素上设置border属性来实现的。有许多不同的表格线样式和属性可以设置,例如边框宽度、边框样式和边框颜色等。要设置表格线,首先需要在HTML中创...
CSS中如何设置表格线
CSS中的表格线通常是通过在表格元素上设置border属性来实现的。有许多不同的表格线样式和属性可以设置,例如边框宽度、边框样式和边框颜色等。
要设置表格线,首先需要在HTML中创建一个表格元素。例如:
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
</table>
table {
border-collapse: collapse; /* 合并单元格边框 */
border: 1px solid #ccc; /* 边框宽度、样式和颜色 */
}
th, td {
border: 1px solid #ccc; /* 边框宽度、样式和颜色 */
padding: 8px; /* 单元格内边距 */
text-align: center; /* 文本居中 */
}
tr:nth-child(even) {
background-color: #f2f2f2; /* 偶数行背景颜色 */
}
tr:hover {
background-color: #ddd; /* 鼠标悬停时的背景颜色 */
}