表格属性

表格属性用于控制表格的外观，包括边框、间距、对齐和布局。掌握表格属性对于创建美观的表格非常重要。

border-collapse 属性

border-collapse 属性用于设置表格边框的合并方式。

基本用法

/* 合并边框 */
.collapse {
  border-collapse: collapse;
}

/* 分离边框（默认） */
.separate {
  border-collapse: separate;
}

实际应用

/* 合并边框的表格 */
.table-collapse {
  border-collapse: collapse;
  width: 100%;
}

.table-collapse th,
.table-collapse td {
  border: 1px solid #ddd;
  padding: 10px;
}

/* 分离边框的表格 */
.table-separate {
  border-collapse: separate;
  border-spacing: 5px;
}

.table-separate th,
.table-separate td {
  border: 1px solid #ddd;
  padding: 10px;
}

border-spacing 属性

border-spacing 属性用于设置相邻单元格边框之间的距离。

基本用法

/* 相同间距 */
.spacing {
  border-spacing: 10px;
}

/* 不同间距 */
.different-spacing {
  border-spacing: 10px 5px;
}

/* 无间距 */
.no-spacing {
  border-spacing: 0;
}

实际应用

/* 带间距的表格 */
.table-spacing {
  border-collapse: separate;
  border-spacing: 10px;
  width: 100%;
}

.table-spacing th,
.table-spacing td {
  border: 1px solid #ddd;
  padding: 10px;
  background: white;
}

caption-side 属性

caption-side 属性用于设置表格标题的位置。

基本用法

/* 标题在表格上方（默认） */
.top {
  caption-side: top;
}

/* 标题在表格下方 */
.bottom {
  caption-side: bottom;
}

实际应用

/* 表格标题样式 */
.table {
  border-collapse: collapse;
  width: 100%;
  caption-side: bottom;
}

.table caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}

empty-cells 属性

empty-cells 属性用于设置空单元格是否显示边框和背景。

基本用法

/* 显示空单元格边框（默认） */
.show {
  empty-cells: show;
}

/* 隐藏空单元格边框 */
.hide {
  empty-cells: hide;
}

实际应用

/* 隐藏空单元格边框 */
.table {
  border-collapse: separate;
  empty-cells: hide;
}

.table td {
  border: 1px solid #ddd;
  padding: 10px;
}

table-layout 属性

table-layout 属性用于设置表格布局算法。

基本用法

/* 自动布局（默认） */
.auto {
  table-layout: auto;
}

/* 固定布局 */
.fixed {
  table-layout: fixed;
}

实际应用

/* 固定布局表格 */
.table {
  table-layout: fixed;
  width: 100%;
}

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

表格边框

基本边框

/* 表格边框 */
.table {
  border: 1px solid #ddd;
}

.table th,
.table td {
  border: 1px solid #ddd;
}

去除边框

/* 去除表格边框 */
.table {
  border: none;
}

.table th,
.table td {
  border: none;
}

表格间距

内边距

/* 单元格内边距 */
.table th,
.table td {
  padding: 10px 15px;
}

外边距

/* 表格外边距 */
.table {
  margin: 20px 0;
}

表格对齐

文本对齐

/* 左对齐 */
.text-left {
  text-align: left;
}

/* 居中对齐 */
.text-center {
  text-align: center;
}

/* 右对齐 */
.text-right {
  text-align: right;
}

垂直对齐

/* 顶部对齐 */
.vertical-top {
  vertical-align: top;
}

/* 居中对齐（默认） */
.vertical-middle {
  vertical-align: middle;
}

/* 底部对齐 */
.vertical-bottom {
  vertical-align: bottom;
}

表格背景

表格背景

/* 表格背景 */
.table {
  background: #f5f5f5;
}

单元格背景

/* 表头背景 */
.table th {
  background: #3498db;
  color: white;
}

/* 斑马纹背景 */
.table tr:nth-child(even) {
  background: #f9f9f9;
}

表格的实际应用

基本表格

/* 基本表格样式 */
.table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

.table th,
.table td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
}

.table th {
  background: #3498db;
  color: white;
  font-weight: bold;
}

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

.table tr:hover {
  background: #f5f5f5;
}

斑马纹表格

/* 斑马纹表格 */
.striped-table {
  border-collapse: collapse;
  width: 100%;
}

.striped-table th,
.striped-table td {
  border: 1px solid #ddd;
  padding: 12px 15px;
}

.striped-table th {
  background: #2c3e50;
  color: white;
  font-weight: bold;
}

.striped-table tr:nth-child(even) {
  background: #ecf0f1;
}

.striped-table tr:hover {
  background: #bdc3c7;
}

响应式表格

/* 响应式表格 */
.responsive-table {
  border-collapse: collapse;
  width: 100%;
  overflow-x: auto;
}

.responsive-table th,
.responsive-table td {
  border: 1px solid #ddd;
  padding: 10px;
  min-width: 120px;
}

@media (max-width: 768px) {
  .responsive-table {
    font-size: 14px;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 8px;
  }
}

圆角表格

/* 圆角表格 */
.rounded-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.rounded-table th,
.rounded-table td {
  border: 1px solid #ddd;
  padding: 12px 15px;
}

.rounded-table th {
  background: #3498db;
  color: white;
  font-weight: bold;
}

.rounded-table th:first-child {
  border-radius: 8px 0 0 0;
}

.rounded-table th:last-child {
  border-radius: 0 8px 0 0;
}

.rounded-table tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
}

.rounded-table tr:last-child td:last-child {
  border-radius: 0 0 8px 0;
}

紧凑表格

/* 紧凑表格 */
.compact-table {
  border-collapse: collapse;
  width: 100%;
}

.compact-table th,
.compact-table td {
  border: 1px solid #ddd;
  padding: 5px 10px;
  font-size: 14px;
}

.compact-table th {
  background: #2c3e50;
  color: white;
  font-weight: bold;
}

表格的最佳实践

1. 使用 border-collapse

/* 推荐 - 合并边框 */
.table {
  border-collapse: collapse;
}

/* 不推荐 - 分离边框（除非有特殊需求） */
.table {
  border-collapse: separate;
  border-spacing: 5px;
}

2. 合理设置单元格内边距

/* 推荐 - 合理的内边距 */
.table th,
.table td {
  padding: 12px 15px;
}

/* 不推荐 - 过小的内边距 */
.table th,
.table td {
  padding: 2px 5px;
  /* 内容过于拥挤 */
}

3. 使用斑马纹提高可读性

/* 推荐 - 使用斑马纹 */
.table tr:nth-child(even) {
  background: #f9f9f9;
}

/* 推荐 - 添加悬停效果 */
.table tr:hover {
  background: #f5f5f5;
}

总结

表格属性用于控制表格的外观：

1. border-collapse：设置表格边框的合并方式
2. border-spacing：设置相邻单元格边框之间的距离
3. caption-side：设置表格标题的位置
4. empty-cells：设置空单元格是否显示边框
5. table-layout：设置表格布局算法
6. 表格边框：设置表格和单元格的边框
7. 表格间距：设置单元格的内边距和外边距
8. 表格对齐：设置单元格的文本对齐和垂直对齐
9. 表格背景：设置表格和单元格的背景

记住以下几点：

• 理解不同表格属性的作用和应用场景
• 掌握表格边框和间距的设置
• 学会创建不同样式的表格
• 注意表格的响应式设计
• 使用斑马纹和悬停效果提高可读性