仅使用 css 而不使用 javascript 将 html 表强制为单个堆叠列答案

【问题标题】：Force html table into single stacked column using only css and no javascript仅使用 css 而不使用 javascript 将 html 表强制为单个堆叠列
【发布时间】：2020-09-01 21:26:41
【问题描述】：

我正在创建一个 html 模板，该模板包含一个用于布置表单的表格。我可以完全控制包装表格而不是表格本身的 html。该表在发送到客户端之前被注入到我的模板中。我无法控制这一切。我唯一能控制的是包装表格和任何 CSS 的 html。

该表是一个两列的表，如下所示：

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>this is column 1</td>
    <td>this is column 2</td>
  </tr>
</table>

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is column 1           |this is  column 2  |
-------------------------------------------------

但是，如果我们可以将其显示为一个堆叠的列，我更愿意。

----------------------------
|Column 1                   |
-----------------------------
|this is column 1           |
-----------------------------
|Column 2                   |
-----------------------------
| this is column 2          |
-----------------------------

有没有办法只使用 CSS 而不是 Javascript 来实现这一点？

【问题讨论】：

有没有试过的代码？
如果您可以更改包装 html，请将其包装在 div 而不是表格中 - 比使用表格更简单和可靠。
@KJF as easwee 建议使用 div 会比 table 更好。
正如我所提到的。我没有换桌子的选项。该表在显示给客户端之前被注入到我的 html 模板中。我无法控制这一点。我所能控制的只是包装表格和任何 css 的 html。
我敢肯定，如果没有一些讨厌的 hack，您将无法强制表格像这样显示。您将不得不更改标记。但是正如您所说，您无法做到这一点，也许您可以更改将信息发送到哪个表格元素。

标签： html css html-table

【解决方案1】：

尝试将此添加到您的 CSS：

td {
  display: table-row;
}

干杯。

【讨论】：

虽然这是一个干净的解决方案，但 IE 将无法显示它。
对我有好处。在我们的后端管理工具中，我们并不真正关心 IE。并且标记是由复杂的库生成的，因此很难更改。
这也会交替行而不是像列一样堆叠它们

【解决方案2】：

我最近遇到了类似的问题，似乎找到了一个很好的解决方案。表格由于经常被误用而名声不佳，但当需要在可变宽度的视口中显示数据网格时，表格确实是最精简的选择。

原始问题的答案仍然是否。为了在没有 JavaScript 的情况下解决这个问题，必须能够编辑表格标记。

桌子看起来……好吧……当被拉得很宽时，但是当被压扁时看起来很糟糕。只有通过向每个单元格添加上下文标记（例如 span.label 和 span.data 元素），才能实现“响应式”表。默认情况下，我们可以轻松隐藏这个新的多余输出，并且仅在处于响应式视图状态时才显示它。

table.responsive td .label {
  display: none;
}

<table class="responsive">
    <thead>
        <tr>
            <th>Column Foo</th>
            <th>Column Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="label">Column Foo</span><span class="data">Baz</span></td>
            <td><span class="label">Column Bar</span><span class="data">Qux</span></td>
        </tr>
    </tbody>
</table>

当处于响应式视图状态时，隐藏thead 元素并显示.label 元素。

table.responsive {
  width: 100%;
}
table.responsive td .label {
  display: none;
}

table.responsive th {
  background-color: #ddd;
}

table.second {
  margin-top: 5em;
}

@media screen and (max-width:640px) {
  table.responsive thead {
    display: none;
  }
  table.responsive tbody th,
  table.responsive tbody td {
    display: block;
  }

  table.responsive td span {
    display: block;
  }
  table.responsive td .label {
    background-color: #ddd;
    font-weight: bold;
    text-align: center;
  }
}

我创建了一个repo，它更详细地介绍了解决方案。点击here查看它的工作原理。

【讨论】：

【解决方案3】：

简单；不。如果没有一些 JavaScript，您无法将行将 2 列的表转换为 1 列的表。
要么告诉表格的编码人员以这种方式创建表格，要么直接使用 JavaScript 重新构造表格。

【讨论】：

如果他们使用表格，更不用说糟糕的编码了。

【解决方案4】：

不，如果不更改标记，这合理是不可能的。 HTML 中的表格结构为 rows，而不是 columns。在您给出的示例中，您正在重新排序内容：

原订单：
Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2

新订单：
Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2

为什么我说“不可能合理地”？好吧，通过绝对定位和类似的技术，您也许可以一起破解您想要的布局 - 但是有一个 CSS 伤害的世界在等待，因为我不希望这种方法在真实页面中发挥得很好。

附加说明：为了添加“重新排序”问题，可能更容易完成的事情是这种布局，其中顺序保持不变：

----------------------------
|Column 1                   |
-----------------------------
|Column 2                   |
-----------------------------
|this is column 1           |
-----------------------------
| this is column 2          |
-----------------------------

但这显然不是你想要的。

【讨论】：

【解决方案5】：

您可以使用display:block; 实现类似的效果。

看到这个小提琴：http://jsfiddle.net/R53KH/

【讨论】：

【解决方案6】：

我能想到的唯一解决方案是更改您的标记。我会以这样的方式更改它，以获取一列并将其写为标记中的一行。这是我创建的小提琴：http://jsfiddle.net/MHsxU/

【讨论】：

【解决方案7】：

在 Chrome 中仍有问题？

对于那些仍然有问题的人（比如我），请检查您的文档头部是否有<!DOCTYPE html>。如果您不这样做，Chrome 似乎会完全忽略您添加的任何内容并保留 display: table-cell。

【讨论】：

【解决方案8】：

实际上，这非常简单（只需 2 行 css 即可完成）：将 td 宽度设置为 100% 并设置 overflow:auto。您的第二列将自动环绕。

【讨论】：