表格css制作

表格CSS制作方法

使用CSS可以美化HTML表格，使其更具视觉吸引力和可读性。以下是一些常用的CSS样式设置方法。

基础表格样式

设置表格边框、间距和整体外观：

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

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

表头样式

突出显示表头：

th {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}

斑马纹效果

交替行颜色提高可读性：

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

tr:hover {
  background-color: #ddd;
}

响应式表格

在小屏幕上添加水平滚动：

.table-responsive {
  overflow-x: auto;
}

固定表头

滚动时保持表头固定：

thead {
  position: sticky;
  top: 0;
}

单元格对齐

控制单元格内容对齐方式：

td.center {
  text-align: center;
}

td.right {
  text-align: right;
}

边框样式

自定义边框样式：

table.custom-border {
  border: 2px solid #333;
}

.custom-border th, .custom-border td {
  border: 1px solid #666;
}

表格间距

调整表格内外边距：

table.spaced {
  border-spacing: 10px;
}

.spaced th, .spaced td {
  padding: 12px 15px;
}

这些CSS样式可以单独使用或组合使用，根据具体需求创建各种风格的表格。通过调整颜色、边框、间距等属性，可以设计出符合网站整体风格的表格样式。