Question

我需要在HTML / CSS中创建一个响应表。我需要该行的第一个单元格在空间变紧时充当完整行，就像下面一样。在任何情况下，列（c2，c3，c4）都应保持垂直对齐（一个单元格在另一个单元格的下方），就像一张普通桌子一样。有想法吗？

普通视图：

+-----------------------+--------+------+------+
|           c1          |   c2   |   c3 |  c4  |
+-----------------------+--------+------+------+

移动视图：

+---------------------+
|           c1        |
+---------+------+----+
|   c2    |   c3 | c4 |
+---------+------+----+
|           c1        |
+---------+------+----+
|   c2    |   c3 | c4 |
+---------+------+----+

Answer 1

这可以使用grid layout完成。

在这里，我正在使用JavaScript来打开和关闭类，以显示样式可以如何更改。但是，您可以达到相同的效果当大小大于指定的断点时，通过不定义<html> <body> <div>some text</div> <iframe name="notyoutube" src="http://example.com"></iframe> <p>some more text</p> <amp-youtube data-videoid="bpcNPHqs4ng" width="560" height="315" layout="responsive"></amp-youtube> <div>one last div</div> </body> </html>和span.mobile样式来进行媒体查询。

有关如何使用网格制作响应表的更多信息，请参见this article。

.grid.mobile

const elements = document.querySelectorAll('.mobile');
setInterval(() => {
  elements.forEach(el => el.classList.toggle('mobile'));
}, 1000);

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid black;
  border-right: 1px solid black;
}

/* toggle below style with a media query */
.grid.mobile {
  grid-template-columns: repeat(3, 1fr);
}

.grid > span {
  padding: 4px 4px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

/* toggle below style with a media query */
span.mobile {
  grid-column: 1 /4;
  font-weight: bold;
  text-align: center;
}

Answer 2

是的，这对于媒体查询是可行的，但是这种特殊的方法很丑陋，并且涉及重复。

具有专用于移动的行。使用媒体查询隐藏和显示此行。使用相同的媒体查询来隐藏移动设备上的单元格。

#table {
  width: 100%;
}

.mRow {
  display: none;
}

@media (max-width: 500px) {
  .mRow {
    display: table-row;
  }
  .dCell {
    display: none;
  }
}

<table id="table" cellspacing="0" border="1">
  <!-- this row is hidden by default, shown with a media query -->
  <tr class="mRow">
    <td colspan="3">C1</td>
  </tr>
  <tr>
    <!-- this cell hidden on mobile with a media query -->
    <td class="dCell">C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
  </tr>
  <!-- this row is hidden by default, shown with a media query -->
  <tr class="mRow">
    <td colspan="3">C1</td>
  </tr>
  <tr>
    <!-- this cell hidden on mobile with a media query -->
    <td class="dCell">C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
  </tr>
</table>

HTML / CSS中的响应表，其中第一个单元格充当完整行

2 个答案: