Question

I would like ta have a table with a minimum height (ex: 100px) so when there is no data in this table I still have a minimal height. I also would like to have rows in this table to be aligned on top so that when I have only 1 element in this table this element should not be aligned middle but top.

Here is my result in this jsFiddle so far: http://jsfiddle.net/ttrMe

The problem is that my items are aligned middle.

Thanks for your help.

Answer 1

The other answers have provided vertical-align: top as the answer, which does answer the specific question. However, I think your approach to the border is flawed.

.tablewrapper {
    border:1px solid #ccc;
    width: 70%;
    min-height: 100px;
    margin: 0 0 5px;
}
.mytable {
    width: 100%;
}
.mytable th {
    background-color: #ccc;
    height: 20px;
}
.mytable td {
    vertical-align: top;
}

http://jsfiddle.net/ttrMe/16/

Note, I changed the border to be on the #tablewrapper div element which wraps the .mytable. Also note, I changed the ids to classes so I could have more than one and demonstrate the difference. Additionally, the min-height does not work alone with the table element, but does with the div.

EDIT

jsFiddle applies a CSS reset (Normalize CSS checkbox on the left), so you might not see the exact same look in your page unless you also reset. In that case, you’ll probably want:

.mytable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

http://jsfiddle.net/ttrMe/17/