Tjoerie Tjoerie - 1 month ago 17
HTML Question

Keeping a TD HEIGHT fixed so it will not stretch with content of TD's in same table



layout

I have a question concerning a little BUTTON layout based on tables, I am making a direct e-mail based on tables and TD's so I can't really use DIVS at the moment.

It's been ages since I've done some serious stuff in tables so bare with me.

I am trying to keep A fixed while B stretches downward along with C.

Sadly A stretches along with the rest and it is meant to stay square and fixed height.

So again.

A - should in place and fixed
B - Stretches along with C
C - Contains text content for the BUTTON A and should make B stretch instead of A.

I hope you know what this is all about, I would appreciate the help.

Answer

I don't really know if I understood your question, but this works fine for me... Only force height of A in CSS and B automatically stretch with C, but A stay fixed.

http://jsfiddle.net/z172kxu7/1/

table, tr, td {
    border: thin solid black;
    width: 100px;
}

.fixed {
    height: 10px;
}

<table>
    <tr>
        <td class="fixed">A</td>
        <td rowspan="2">Lorem ipsum yolo. Lorem ipsum yolo.</td>
    </tr>

    <tr>
        <td>B</td>
    </tr>
</table>