Question

Tables don’t jive with me.

This is a simplified version of the table I’m working with: http://jsfiddle.net/bWghU/

Code below:

table {
    padding: 5px;   
}
table th { padding: 0 5px }
table tr { background-color: #CCC }
table tr:nth-child(odd) { background-color: #FFF }
table td { border-bottom: 1px solid #555 }

<table>
    <thead>
        <th>Data</th>
        <th>Data</th>
        <th>Data</th>
        <th>Data</th>
        <th>Data</th>
        <th>Data</th>
    </thead>
    <tbody>
        <tr>
            <td rowspan="10" style="background-color:red">this has a <br /><br /><br />min-height of ~100px<br /><br /><br /></td>
            <td>one</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
        </tr>
        <tr>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
        </tr>
        <tr>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
        </tr>
        <tr>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
        </tr>
        <tr>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="2" style="background-color:blue">this has a <br /><br /><br />min-height of ~100px<br /><br /><br /></td>
            <td>one</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
        </tr>
        <tr>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
            <td>two</td>
        </tr>
    </tbody>
</table>

As you can see the rowspan kills my fixed height dream. I’ve tried wrapping divs inside (dynamically), but to no luck.

I need the TD’s to stay the same height, all except for the one w/ the rowspan (it needs to expand as needed) – so that the TD’s do not stretch.

Answer 1

You have set the blue cell to have a rowspan of 2 and a min height of 100px => each row must have a height of 50px (100px / 2 rows).