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

我正在创建一个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中的表格被构造为行,而不是列.在示例中,您将重新订购内容：

原始订单：
第1栏 – >第2栏 – > this-is-col-1 – >这-是-COL-2

新订购：
第1栏 – > this-is-col-1 – >第2栏 – >这-是-COL-2

为什么我说“不合理”？好吧,凭借绝对的定位和类似的技术,你可以一起破解你想要的布局 – 但是有一个CSS伤害的世界等待,因为我不希望这种方法在真实页面中发挥出色.

附加说明：要添加到“重新排序”问题,可能更容易实现的是这种布局,其中顺序保持不变：

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

但这显然不是你想要的.

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

解决方法

猜你在找的CSS相关文章