[Solved] table correct vertical align

[ultimatia]

Hello,

I have a table with three collums and three rows.

See also:

In the table there is a link: more information.
By clicking I get this:

But I want this:

You can see it working:
http://codepen.io/ULT/pen/KpVPrx

Is this possible with css or jquery?

I didnt get it working.

Thanks alot!

[ultimatia]

Thanks for your help.

I have tried your suggestion but unfortunately this is not working.

What I want is the following:
Line 1 (Title) in 2nd column OR
Line 1 (Title) AND Line 2 (more information) in 2nd collumn need to be vertical middle aligned relative to the image in column 1.

Also “text” in the 3rd column need to be vertical middle aligned relative to the image in column 1.

Rule #1, rule #2, rule #3 and rule #4 may not have influence on the middle alignment.

[Paulie_D]

Closest I can come up with but I suspect that some of your requirements are mutually exclusive when it comes to tables.

http://codepen.io/Paulie-D/pen/qdbOVr

The fact is that there are only 3 alignment options in tables and you can’t tell them to not apply to certain parts of a cell.

[ultimatia]

Allright, thanks!

I think we can`t handle the problem with only tables

Is something like this possible in css (or jquery):
title and more info link in <TD>
more info div AFTER <TD>
Content show below the link

<table>
<tr>
<td>
<h1>Title</h1>
<span>more info</span>
</td>
<div>more info blabla br/>
blablablbal<br />
blablablbal</div>
</tr>
</table>

[Paulie_D]

Not really…you can’t put a random div inside a table, it would invalidate your HTML

You might be able to have another row underneath this target row. This would be hidden and will reveal itself on a click.

Whether you can make this look the way you want is another issue.

http://codepen.io/Paulie-D/pen/zGrrKd

[ultimatia]

Thanks alot! The extra row did the trick.

This is the new solution:
http://codepen.io/ULT/pen/KpVMRO

Is the code valide?

Thanks for the support. :)

[Author]

Posts