Convert Horizontal <table> to vertical using CSS

jrahma

Hi,

I have a <table> like this:

Name Mike Watson
Age 38
Title Accountant
Department Finance

and I want to list it this way using CSS:

Name
Mike Watson

Age
38

Title
Accountant

Department
Finance

How can I do that please?

Thanks,
Jassim

Weedpacket

You can use display:to change the display mode of <tr> and <td> elements (display:block, for example).

dalecosp

It's pretty hard to guess exactly what you mean ... do you want cell padding for whitespace between the cells?

It also appears you want to wrap the text? You could fake that by setting the width to fairly narrow and forcing the wrap ... but ...

... is there some reason that you can't just change the markup? ;-)

laserlight

I think the aim is to turn a table with a column of names and a column of corresponding values:
[table="class: grid"]
[tr]
[td]Name[/td]
[td]Mike Watson[/td]
[/tr]
[tr]
[td]Age[/td]
[td]38[/td]
[/tr]
[tr]
[td]Title[/td]
[td]Accountant[/td]
[/tr]
[tr]
[td]Department[/td]
[td]Finance[/td]
[/tr]
[/table]
Into a list of name/value pairs:

Name
Mike Watson

Age
38

Title
Accountant

Department
Finance

But it seems to me that perhaps the markup should be changed, e.g., to use a definition list instead of a table. After all, the result isn't a "vertical table", but rather a list of name/value pairs.

dalecosp

It's pretty hard to represent his intent with plain text (which probably explains why you used an actual table). I'm really not sure what to make out of all these "magic CSS" threads, either: "How can I make a rocketship using only these paintbrushes?" 😉

jrahma

Yesh laserlight is right. I want to change the table layour to be just single rows like this:

laserlight

I recommend that you change the markup to:

<dl>
    <dt>Name</dt>
    <dd>Mike Watson</dd>
    <dt>Age</dt>
    <dd>38</dd>
    <dt>Title</dt>
    <dd>Accountant</dd>
    <dt>Department</dt>
    <dd>Finance</dd>
</dl>

Then style it accordingly.

Bonesnap

If browser compatibility is a concern than I think you should go with a definition list as well. IE9 and below do not support <tr> and <td> being set to display: block.

jrahma

Bonesnap;11049705 wrote:
If browser compatibility is a concern than I think you should go with a definition list as well. IE9 and below do not support <tr> and <td> being set to display: block.

what do you mean by definition list? similar to laserlight's suggestion:

<dl>
<dt>Name</dt>
<dd>Mike Watson</dd>
<dt>Age</dt>
<dd>38</dd>
<dt>Title</dt>
<dd>Accountant</dd>
<dt>Department</dt>
<dd>Finance</dd>
</dl>

Bonesnap

Yup!

ammejohn10

Firstly, I prefer you to use <div> tag to contain your data and position divs according to your requirement. And you can also modify this by following code : <table>
<tr>
<td>Name<br />
Mike Watson
</td>
</tr>
<tr>
<td>Age<br />
38
</td>
</tr>
<tr>
<td>Title<br />
Accountant
</td>
</tr>
<tr>
<td>Department<br />
Finance
</td>
</tr>
</table>

May be this will be helpful for you🙂