如何修复CSS模拟div表格在桌面端colspan不生效的问题

问题原因 #

你当前桌面端使用的是CSS模拟table布局，这类布局本身没有和原生HTML colspan 属性对应的CSS配置规则，所以仅添加了colspan类名无法实现跨列效果。

修复方案 #

不需要调整现有HTML结构，只需要把桌面端的布局实现改成CSS Grid即可灵活配置跨列效果，修改后的核心CSS如下：

* {
  box-sizing: border-box;
}
.divTable {
  display: grid;
  width: 100%;
  /* 定义3列宽度，可根据需求自行调整 */
  grid-template-columns: auto 1fr 1fr;
}
.tHead {
  color: #fff;
  background: #009fc8;
  font-weight: bold;
  font-size: 25px;
}
.tBody {
  font-weight: bold;
  font-size: 25px;
}
.tFooter {
  color: #fff;
  background: #009fc8;
  font-weight: bold;
  font-size: 25px;
}
.tr {
  display: grid;
  /* 每行继承全局3列配置，兼容所有主流浏览器 */
  grid-template-columns: auto 1fr 1fr;
  font-weight: bold;
  font-size: 25px;
}
.td,
.th {
  padding: 10px;
  text-align: center;
  font-size: 22px;
  word-wrap: break-word;
}
.td {
  font-weight: bold;
}
.colspan {
  background: beige;
  text-align: center;
  /* 配置跨2列 */
  grid-column: span 2;
}
.check {
  color: limegreen;
  font-size: 30px;
}
.remove {
  color: red;
  font-size: 30px;
}
.th:first-child,
.td:first-child {
  font-weight: bold;
  color: black;
}
@media screen and (max-width: 768px) {
  .check {
    color: limegreen;
    font-size: 20px;
  }
  .remove {
    color: red;
    font-size: 20px;
  }
  .tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  .td,
  .th {
    display: block;
    width: 33.333333333333%;
    font-size: 20px;
  }
  .th:first-child,
  .td:first-child {
    background: #efefef;
    width: 100%;
  }
  .th:first-child {
    display: none;
  }
  .colspan {
    width: 100%;
  }
}

原有移动端的媒体查询逻辑完全保留，修改后桌面端米色区域可正常跨2列展示，移动端效果不受影响。

内容的提问来源于stack exchange，提问作者user17342243