网页制作css表格

使用CSS创建表格

CSS表格可以通过display: table系列属性实现，这种方式比传统HTML表格更灵活，适合非表格数据的布局需求。

基本结构

<div class="table">
  <div class="row">
    <div class="cell">内容1</div>
    <div class="cell">内容2</div>
  </div>
  <div class="row">
    <div class="cell">内容3</div>
    <div class="cell">内容4</div>
  </div>
</div>

CSS样式

.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 8px;
  border: 1px solid #ddd;
}

传统HTML表格样式优化

对于标准HTML表格（<table>标签），CSS可以显著改善视觉效果：

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

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

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

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

响应式表格设计

针对移动设备，可通过以下方法增强表格可读性：

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: 10px;
    display: block;
    border: 1px solid #ddd;
  }

  td {
    display: block;
    text-align: right;
    border-bottom: 1px dotted #ccc;
  }

  td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

高级表格特效

斑马纹效果

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

固定表头

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

单元格特殊样式

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

表格边框控制

/* 单一边框样式 */
table {
  border: 1px solid #ddd;
}

/* 内部边框控制 */
td {
  border-right: 1px solid #eee;
}

td:last-child {
  border-right: none;
}

以上方法可根据实际需求组合使用，CSS表格设计的关键在于合理运用display属性和边框控制，同时考虑不同设备的显示效果。