CODEWITHSUNDEEP
htmlcsshtml-table
Paco Giurfa Ley
Paco Giurfa Ley

Reputation: 45

CSS convert table columns into full-width stacked elements

I've found many ways to create a 'tableless' table layout using only DIVs, but very little about the opposite.

I have more than a few html pages with a table structure, and they all refer to a common CSS file. The tables have a simple 2-column layout as follows:

<table>
  <tbody>
    <tr>
      <th>category</th>
      <td>description</td>
    </tr>
    <tr>
      <th>category</th>
      <td>description</td>
    </tr>
  </tbody>
</table>

I want to be able to transform the layout of the table through CSS only, in order to make it look like a 'single-column table' if you will, with both categories and descriptions stacked on top of another within the full-width of the table. I've tried display:block and width:100% but it doesn't work cross-browser.

Thoughts?

Upvotes: 3

Views: 4543

Answers (1)

otinanai
otinanai

Reputation: 4023

You can achieve the result you want if you float each cell. See this demo: http://jsfiddle.net/t3ZaM/

Works in FF, Chrome, Opera, Safari, IE9 and 10 but I can't check for older versions of IE because I don't have them.

Upvotes: 4

Related Questions