html - 仅使用 css 而不使用 javascript 将 html 表强制为单个堆积列

Question

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

该表是一个包含两列的表，如下所示:

<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 来实现这一点？

Answer 1

尝试将此添加到您的 CSS:

td {
  display: table-row;
}

干杯。