CODEWITHSUNDEEP
htmlcsshtml-table
KJF
KJF

Reputation: 2103

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

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?

Upvotes: 12

Views: 37849

Answers (8)

Jess
Jess

Reputation: 11

Actually, it's incredibly easy (and can be done with 2 lines of css): Make your td width 100% and set overflow:auto. Your second column will automatically wrap around.

Upvotes: 0

yesnoio
yesnoio

Reputation: 61

I was confronted with a similar problem recently & seem to have found a good solution. Tables have a bad rap due to frequent mis-use, but are indeed the leanest option when needing to display a grid of data in a variable width viewport.

The answer to the original question is still no. In order to solve this problem without JavaScript, one must be able to edit the table markup.

Tables can look... okay... when stretched wide, but look just terrible when squished. "Responsive" tables are possible only by adding contextual markup to each cell (e.g. span.label & span.data elements). We can easily hide this new superfluous output by default & only show it when in a responsive view state.

table.responsive td .label {
  display: none;
}
<table class="responsive">
    <thead>
        <tr>
            <th>Column Foo</th>
            <th>Column Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="label">Column Foo</span><span class="data">Baz</span></td>
            <td><span class="label">Column Bar</span><span class="data">Qux</span></td>
        </tr>
    </tbody>
</table>

When in a responsive view state, hide the thead element & show the .label elements.

table.responsive {
  width: 100%;
}
table.responsive td .label {
  display: none;
}

table.responsive th {
  background-color: #ddd;
}

table.second {
  margin-top: 5em;
}

@media screen and (max-width:640px) {
  table.responsive thead {
    display: none;
  }
  table.responsive tbody th,
  table.responsive tbody td {
    display: block;
  }

  table.responsive td span {
    display: block;
  }
  table.responsive td .label {
    background-color: #ddd;
    font-weight: bold;
    text-align: center;
  }
}

I've created a repo which covers the solution in greater detail. Click here to see it work.

Upvotes: 6

timtom
timtom

Reputation: 133

Still having issues and in Chrome?

For those still having issues (like me) check you have <!DOCTYPE html> in the head of your document. If you don't Chrome seems to totally ignore anything you add and keep display: table-cell.

Upvotes: 0

Aman J
Aman J

Reputation: 1855

only solution I can think of is, changing your Markup. I would change it in such a way to take one column and write it as an row in markup. Here is an fiddle I have created : http://jsfiddle.net/MHsxU/

Upvotes: 0

starbeamrainbowlabs
starbeamrainbowlabs

Reputation: 6106

You can achieve something similar by using display:block;.

See this fiddle: http://jsfiddle.net/R53KH/

Upvotes: 0

Kneel-Before-ZOD
Kneel-Before-ZOD

Reputation: 4221

    Simply; No. You cannot turn a row turn a 2-column table into a 1-column table without some JavaScript.
    Either tell the coders of the table to create the table that way, or simply use JavaScript to re-structure the table.

Upvotes: 3

George
George

Reputation: 768

Try adding this to you CSS:

td {
  display: table-row;
}

Cheers.

Upvotes: 24

Jeroen
Jeroen

Reputation: 63760

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.

Upvotes: 2

Related Questions