企源知识库

在CSS中设置表格样式可以通过以下几种方法1：

1. 基本样式设置 ：

table {
  border-collapse: collapse；
  border-spacing: 0；
  width: 100%；
}

2. 边框样式 5：

table {
  border: 1px solid #ccc；
}

3. 背景颜色和交替行 5：

tr:nth-child(even) {
  background-color: #f1f1f1；
}
tr:nth-child(odd) {
  background-color: #ffffff；
}

4. 固定表头 ：

table-body {
  overflow-y: scroll；
}

5. 固定列 ：

.fixed-column {
  position: sticky；
  top: 0；
}

6. 其他样式 ：

.table-dark {
  background-color: #333；
  color: #fff；
}
.thead-light {
  background-color: #f8f9fa；
}
.thead-dark {
  background-color: #343a40；
}
.table-striped {
  border-top: 1px solid #ccc；
  border-bottom: 1px solid #ccc；
}
.table-bordered {
  border: 1px solid #ccc；
}
.table-hover {
  transition: background-color 0.3s；
}
.table-hover:hover {
  background-color: #e9ecef；
}
.table-sm {
  font-size: 12px；
}

7. 添加背景色 8：

.table-active {
  background-color: #e9ecef；
}

8. 自定义类样式 ：

table.default-table {
  width: 100%；
  border: 1px solid #333；
  border-collapse: collapse；
  border-spacing: 0；
}
table.default-table tbody tr {
  height: 20px；
  line-height: 20px；
}
table.default-table tbody tr.odd {
  background-color: #fff；
}
table.default-table tbody tr.even {
  background-color: #F5F5F5；
}
table.default-table tbody tr:hover {
  background-color: #eee；
}
table.default-table tbody tr th, table.default-table tbody tr td {
  padding: 3px 5px；
  text-align: left；
}

以上是一些常见的CSS表格样式设置，你可以根据需要进行调整和组合。