Home/ Questions/Q 8510905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T03:50:13+00:00

I’m creating a html template that wraps a table that is used to lay

  • 0

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

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0