set table row height
Asked Answered
C

1

8

My lacking skills of CSS is giving me a headache. As presented in this picture below, captured from firebug:

enter image description here

Using a GWT like framework called Vaadin I have given a Table component the class name m2m-modal-table and I want set a min-height to the four rows in that table. However, I can't seem to get it to work.. And as you see from the image the table doesn't even seem to have the class name m2m-modal-table but v-table-table instead (styles are being added outside my involvement since I'm using an already setup framework library).

So, can anyone who has good knowledge of CSS class referring tell me what I should write in the style sheet to set the row height of the table?

Thank you!

EDIT: Thank you avall for the help. And I found that writing the CSS as:

.m2m-modal-table .v-table-table th,
.m2m-modal-table .v-table-table td {
    height: 55px;
    min-height: 55px;
}

Will only set the style on the table in question and not all tables in the application.

Cosy answered 23/9, 2011 at 14:0 Comment(0)
T
10

Always set your height to cells, not rows.

.v-table-table th,
.v-table-table td{
    height: 55px;
    /* min-height: 55px; EDITED */
}

will do (min-height alone doesn't work).

Edit: As djsadinoff wrote, min-height doesn't work everywhere. IE8 and IE9 interpret min-height but it is not the norm for other browsers.

Translative answered 23/9, 2011 at 14:11 Comment(5)
yea it does seem like that should work, but it doesn't... I'm totally confused, I've tried with so many combinations but nothing seems to work.. Do you have any other idea, referring the CSS class name to m2m-modal-table in some fashion..?Cosy
You should see in Firefox firebug which styles affect these cells and then override them. You can also try to use !important. I can't help you more without looking at the site.Translative
Wow! That last edit did the trick! Thanks! Now I only have to figure out how to have it only affect THIS table and not all tables in the application... =)Cosy
why would this work? from the css2.1 spec: In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.Softball
I was pretty sure that I left min-height on purpose. Now I tested height property in every web browser I could and I think you're right.Translative

© 2022 - 2024 — McMap. All rights reserved.