[分享]css入门到精通表格样式

CSS入门到精通：表格样式

/* 表格边框样式 */
table {
  border: 1px solid black;
}

/* 表格内容样式 */
td {
  padding: 10px;
}

/* 表头样式 */
th {
  background-color: #f2f2f2;
  color: #666;
  padding: 10px;
}

/* 鼠标悬停样式 */
tr:hover {
  background-color: #ddd;
}

/* 奇偶行样式 */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* 表格宽度自适应 */
table {
  width: 100%;
  border-collapse: collapse;
}

/* 单元格内容溢出隐藏 */
td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 表格排序箭头样式 */
th.sortable:after {
  content: " ?";
  font-size: 0.8em;
}

th.sorted-asc:after {
  content: " ?";
}

th.sorted-desc:after {
  content: " ?";
}

/* 自定义单元格样式 */
td.status {
  text-align: center;
  font-weight: bold;
}

td.active {
  color: green;
}

td.inactive {
  color: red;
} 

以上是一些常用的表格样式，通过CSS可以轻松地将普通的表格样式提升为美观、易读、易用的表格。具体样式可以根据自己的需求进行调整和优化。