html - 在表中使用固定列和行跨度进行不需要的移位

Question

我有一个表格，其中一个表格标题使用 rowspan。此表还切换到较小尺寸的固定列样式。我遇到的问题是较小的尺寸，当带有 rowspan 的 th 变得固定时，它弄乱了 remaning th 的结构>.

我想到的一个解决方案是在 Foods 上面有一个空的 th，这样我就不必使用 rowspan，但是由于 ADA 的要求，这不是一个选项。

这是一些代码:CODEPEN

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

这是何时进入固定列布局的 View 。您可以看到 Group 1 - Col 1 现在取代了 Foods 原来所在的位置，并且整个 2nd 都发生了变化。

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>