Html 使用表中的固定列和行跨度进行不必要的移位

我有一个表，其中一个表头使用

rowspan

。此表还可以在较小的尺寸上切换为固定列样式。我遇到的问题是尺寸较小，当

th

和

rowspan

的

th

变得固定时，它会弄乱还押

th

的结构

我想到的一个解决方案是在食物上方放置一个空的

th

，这样我就不必使用

rowspan

，但由于ADA的要求，这不是一个选项

下面是一些代码：

这是大屏幕视图-您可以看到有一个Foods列和两个组，每个组包含两个列。

这是它何时转到固定列布局的视图。你可以看到第1组-第1列现在取代了食物原来的位置，整个第2列也发生了变化

HTML:

---

我不是很确定这个问题，但它似乎与使用

位置：fixed

有关。您正在从流中删除元素，因此它们似乎不再属于表，从而使表算法的行为变得奇怪

一个固定的想法是考虑一个额外的元素，你可以在小屏幕上看到，以避免这个问题。基本上，当您制作一些元素时，该元素将更正表格布局

position:fixed

*{
文本对齐：居中；
字体大小：正常；
}
桌子{
边框：实心1px黑色；
边界间距：0；
边界塌陷：塌陷；
宽度：900px；
}
th{
垂直对齐：底部对齐；
填充物：5px10px；
左边框：实心1px灰色；
}
th[colspan=“2”]{
边框底部：实心1px灰色；
}
运输署{
边框顶部：纯色1px灰色；
}
t车身tr:n个儿童（奇数）td{
背景：灰色；
}
.固定{
左边界：无；
}
.修理{
填充：0；
边界：无；
}
@介质（最小宽度：700px）{
.修理{
显示：无；
}
}
@介质（最大宽度：700px）{
.固定{
位置：绝对位置；
宽度：50px；
左：0；
}
.包裹{
溢出-x：滚动；
溢出y：可见；
左边距：50像素；
}
}

食品
第一组
第2组
第1列
第2列
第3列
第4列
玉米饼
空白的
空白的
空白的
空白的
披萨
空白的
空白的
空白的
空白的

在制作响应性布局时，众所周知，表格很难使用。一个简单得多的解决方案是使用CSS网格解决方案。不幸的是，它仍然使用一个空单元来工作，但这是我遇到的最接近的解决方案。您可能需要将答案更新为

display:inline；display:initial

所以它也可以在IE中使用。@itsclarke尝试

表格单元格

而不是

initial

似乎IE中不支持最后一个，它将更新answer@itsclarke检查更新，可以使用伪元素避免额外的元素

<div class="wrap">
  <table>
    <thead>
      <tr>
        <th rowspan="2" class="fixed">Foods</th>
        <th colspan="2">Group 1</th>
        <th colspan="2">Group 2</th>
      </tr>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="fixed">Tacos</td>
        <td>blank</td>
        <td>blank</td>
        <td>blank</td>
        <td>blank</td>
      </tr>
      <tr>
        <td class="fixed">Pizza</td>
        <td>blank</td>
        <td>blank</td>
        <td>blank</td>
        <td>blank</td>
      </tr>
    </tbody>
  </table>
</div>

table {
  border: solid 1px black;
  border-spacing: 0;
  border-collapse: collapse;
  width: 900px;
}

th {
  vertical-align: bottom;
  padding: 5px 10px;
  border-left: solid 1px grey;
}

th[colspan="2"] {
  border-bottom: solid 1px grey;
}

td {
  border-top: solid 1px grey;
}

tbody tr:nth-child(odd) td {
  background: grey;
}

.fixed {
  border-left: none;
}

@media (max-width: 600px) {
  .fixed {
    position: absolute;
    width: 50px;
    left: 0;
  }

  .wrap {
    overflow-x: scroll;
    overflow-y: visible;
    margin-left: 50px;
  }
}