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

Question

我有一个表，其中的表头之一使用rowspan。该表还可以切换到较小尺寸的固定列样式。我遇到的问题是较小的尺寸，当th和rowspan固定后，它弄乱了剩余的th的结构。

我想到的一个解决方案是在Foods上方留一个空的th，所以我不必使用rowspan，但是由于ADA的要求，这不是一种选择。

以下是一些代码：CODEPEN

这是大屏幕视图-您可以看到有一个“食物”列以及两个组，每个组包含两列。

这是何时进入固定列布局的视图。您会看到第1组-第1栏现在取代了Foods，而整个第2栏都发生了变化。

HTML：

<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>

CSS：

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;
  }
}

Answer 1

我不太确定这个问题，但它似乎与position:fixed的使用有关。您正在从流中删除元素，就好像它们不再属于表一样，使表算法的行为变得奇怪。

解决方法是考虑在小屏幕上显示的额外元素，以避免出现此问题。基本上，当您制作一些元素position:fixed

时，此元素将纠正表布局。

* {
  text-align: center;
  font-weight: normal;
}

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;
}

.fix {
  padding:0;
  border:none;
}
@media (min-width:700px) {
.fix {
  display:none;
}
}

@media (max-width: 700px) {
  .fixed {
    position: absolute;
    width: 50px;
    left: 0;
  }
  .wrap {
    overflow-x: scroll;
    overflow-y: visible;
    margin-left: 50px;
  }

}

<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 class="fix"></th>
        <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>

为避免多余的元素，您可以考虑使用伪元素：

* {
  text-align: center;
  font-weight: normal;
}

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;
}

thead > tr:last-child::before {
  content:"";
  display:table-cell;
  padding:0;
  border:none;
}
@media (min-width:700px) {
thead > tr:last-child::before {
  display:none;
}
}

@media (max-width: 700px) {
  .fixed {
    position: absolute;
    width: 50px;
    left: 0;
  }
  .wrap {
    overflow-x: scroll;
    overflow-y: visible;
    margin-left: 50px;
  }

}

<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>