如何使用CSS Grid实现复杂表格布局_网格布局实践案例

<div class="grid-table">
  <div class="header-cell">姓名</div>
  <div class="header-cell">部门</div>
  <div class="header-cell">销售额</div>
  <div class="header-cell">状态</div>
<p><div class="data-cell">张三</div>
<div class="data-cell">销售部</div>
<div class="data-cell">¥120,000</div>
<div class="data-cell"><span class="status active">活跃</span></div></p><p><div class="data-cell">李四</div>
<div class="data-cell">技术部</div>
<div class="data-cell">¥85,000</div>
<div class="data-cell"><span class="status inactive">待定</span></div></p><p><div class="summary-row" colspan="4">
总计：¥205,000
</div>
</div></p>

.grid-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 四列均分 */
  gap: 1px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
}

.header-cell {
  background-color: #003366;
  color: white;
  padding: 12px 8px;
  font-weight: bold;
  text-align: center;
}
<p>.data-cell {
background-color: white;
padding: 10px 8px;
text-align: center;
border-bottom: 1px solid #eee;
}</p>

grid-template-columns: 2fr 1.5fr 1fr 1fr;

.summary-row {
  grid-column: span 4;
  background-color: #003366;
  color: white;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
}

<div class="note-cell" style="grid-column: span 2;">
  此员工表现优异
</div>

@media (max-width: 768px) {
  .grid-table {
    grid-template-columns: 1fr;
  }
<p>.header-cell {
display: none; /<em> 隐藏表头，改用标签内联显示 </em>/
}</p><p>.data-cell:nth-child(4n+1) { /<em> 每行第一个单元格（姓名）加粗 </em>/
font-weight: bold;
background-color: #f9f9f9;
}
}</p>

@media (max-width: 768px) {
  .grid-table {
    overflow-x: auto;
    white-space: nowrap;
  }
}

grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));