仅使用 css 而不使用 javascript 将 html 表强制为单个堆叠列 [英] Force html table into single stacked column using only css and no javascript

问题描述

我正在创建一个 html 模板，该模板包含一个用于布置表单的表格.我可以完全控制包装表格的 html 而不是表格本身.该表在发送给客户端之前被注入到我的模板中.我对此没有任何控制权.我唯一可以控制的是包装表格的 html 和任何 CSS.

I'm creating a html template that wraps a table that is used to lay out a form. I have full control over the html that wraps the table not the table itself. The table is injected into my template before it's sent to the client. I have no control over this whatsoever. The only thing I do have control over is the html that wraps the table and any CSS.

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

The table is a two column table that looks like this:

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

不过，如果我们可以将它显示为一个堆叠的列，我更愿意.

However I would prefer if we could show it as one stacked column.

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

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

Is there a way to achieve this using only CSS, no Javascript?

推荐答案

不，这在不更改标记的情况下合理是不可能的.HTML 中的表格结构为行，而不是列.在您给出的示例中，您正在对内容重新排序:

Nope, this is not reasonably possible without changing the markup. Tables in HTML are structured as rows, not as columns. In the example you give you're re-ordering the content:

原订单:
<代码>第 1 列 ->第 2 列 ->this-is-col-1 ->this-is-col-2

新排序:
<代码>第 1 列 ->this-is-col-1 ->第 2 列 ->this-is-col-2

为什么我说不可能合理"?好吧，通过绝对定位和类似的技术，您可能能够一起破解您想要的布局 - 但是有一个 CSS 伤害等待的世界，因为我不希望这种方法在真实页面中发挥作用.

Why did I say "not reasonably possible"? Well, with absolute positioning and similar techniques you may be able to hack the layout you want together - but there's a world of CSS-hurt waiting as I don't expect that approach to play nice in a real page.

附加说明:为了增加重新排序"的问题，可能更容易完成的是这种布局，其中顺序保持不变:

Additional note: To add to the "re-ordering" problem, something that may be a little easier to accomplish would be this layout, where the order stays the same:

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

但这显然不是你想要的.

But that's obviously not what you want.

这篇关于仅使用 css 而不使用 javascript 将 html 表强制为单个堆叠列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！