我正在创建一个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 | -----------------------------
但这显然不是你想要的.
