可以通过CSS中使用伪类选择器来为表格中不同的单元格设置不同的颜色及样式。以下是一个简单的示例代码:
HTML:
Column 1
Column 2
Column 3
Row 1
Row 2
Row 3
CSS:
/* 设置列的背景色 */
th.colored {
background-color: yellow;
}
/* 设置行的背景色 */
tr:nth-child(even) td {
background-color: #eee;
}
tr:nth-child(odd) td {
background-color: #fff;
}
/* 设置表格的外边框 */
table {
border-collapse: collapse;
border: 1px solid black;
}
/* 设置行标题的背景色 */
th.row-header {
background-color: lightgray;
}
/* 设置单击交互效果 */
td:focus {
outline: none;
background-color: blue;
color: white;
}
以上代码可以为表格设置不同的行和列的背景色,还可以设置单击单元格时的交互效果。
上一篇:表格行颜色问题-为什么会发生?