Force html table into single stacked column using only css and no javascript

Question

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 in

Answer 1

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:

Original order:
Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2

New ordering:
Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2

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.