表格制作css

CSS表格样式设计

基础表格样式 通过border-collapse合并边框，使表格更整洁。width控制整体宽度，text-align设置文字对齐方式。

table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
}

单元格样式 使用padding增加单元格内边距，border定义边框样式。可通过:nth-child()伪类实现斑马纹效果。

td, th {
  padding: 12px;
  border: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

表头突出显示 用background-color和color增强表头视觉对比度，position: sticky实现滚动时固定表头。

th {
  background-color: #4CAF50;
  color: white;
  position: sticky;
  top: 0;
}

响应式表格 通过媒体查询和display: block在小屏幕设备上改变布局方式。

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

悬停效果 添加transition过渡效果，结合:hover伪类提升交互体验。

tr:hover {
  background-color: #ddd;
  transition: background-color 0.3s;
}

高级表格技巧

固定列宽 使用table-layout: fixed配合width属性精确控制列宽。

table.fixed {
  table-layout: fixed;
}

table.fixed th:nth-child(1) {
  width: 20%;
}

单元格内容截断 通过text-overflow: ellipsis实现过长内容的优雅截断显示。

td.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

边框样式定制 利用border-spacing和border-radius创建特殊边框效果。

table.rounded {
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
}

表头阴影效果 通过box-shadow增加深度感，提升视觉层次。

th.shadow {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}