当前位置：首页 > CSS

表格tb制作css

2026-03-31 23:29:49CSS

表格样式基础设置

表格的基础样式包括边框、间距和对齐方式。以下是一个基础CSS样式示例：

.tb {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

.tb th, .tb td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.tb th {
  background-color: #f2f2f2;
  color: #333;
}

响应式表格设计

针对移动设备优化表格显示，可以添加水平滚动：

@media screen and (max-width: 600px) {
  .tb {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

斑马纹效果

通过交替行颜色提高可读性：

.tb tr:nth-child(even) {
  background-color: #f9f9f9;
}

.tb tr:hover {
  background-color: #f1f1f1;
}

表头固定

对于长表格，可以固定表头：

.tb thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

单元格特殊样式

为特定单元格添加样式：

.tb .highlight {
  background-color: #ffeb3b;
  font-weight: bold;
}

.tb .numeric {
  text-align: right;
  font-family: monospace;
}

边框样式优化

创建更精致的边框效果：

.tb {
  border: none;
  box-shadow: 0 0 0 1px #ddd;
}

.tb th, .tb td {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}

.tb tr:last-child td {
  border-bottom: 1px solid #ddd;
}

紧凑型表格

减少间距创建紧凑布局：

.tb-compact td, .tb-compact th {
  padding: 4px 6px;
  font-size: 0.9em;
}

圆角表格

为表格添加圆角效果：

表格tb制作css

.tb-rounded {
  border-radius: 8px;
  overflow: hidden;
}

.tb-rounded thead th:first-child {
  border-top-left-radius: 8px;
}

.tb-rounded thead th:last-child {
  border-top-right-radius: 8px;
}

这些样式可以根据实际需求组合使用，通过class应用到HTML表格元素上。