CODEWITHSUNDEEP
htmlhtml-table
omega
omega

Reputation: 43843

How to get table cell to use minimum height when using rowspan?

My html table looks like

-------
|  |  |
|  |--|
|  |  |
-------

The problem is, when the height of the column on the left side, gets too big, the top right cell's height expands too much.

How can I set it so that the height of the top right cell is only big enough to show whats inside it? Basically use minimum height to show everything inside. The bottom right cell, should have a valign set to top too.

Upvotes: 1

Views: 679

Answers (3)

TheAl_T
TheAl_T

Reputation: 180

The only way I found to shrink-fit the row to the content's size is to set its height to 0

table.spanned tr:first-child { height:0 }

https://jsfiddle.net/TheALT/70qxk4hm/

Upvotes: 0

Olivier HUET
Olivier HUET

Reputation: 11

I had a similar problem. I had image in the big cell, text in the top right and image on the bottom right. It appeared that I had vertical-align property set to baseline for table, tr and td in my CSS. I do not understand why but removing it was enough to solve my problem. I hope this can be useful to some.

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46579

Will this help?

table.spanned tr:first-child {height:100%}

Result:
enter image description here

http://jsfiddle.net/MrLister/zqDDu/4/

Upvotes: 0

Related Questions