Блог

Таблицы меня не устраивают.

Это упрощенная версия таблицы, с которой я работаю: http://jsfiddle.net/bWghU /

Код ниже:

 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>
  

Как вы можете видеть, rowspan убивает мою мечту о фиксированной высоте. Я пробовал переносить divs внутрь (динамически), но безуспешно.

Мне нужно, чтобы TD оставались одинаковой высоты, все, кроме одного с rowspan (его нужно расширять по мере необходимости) — чтобы TD не растягивались.

Вы установили для синей ячейки размах строк 2 и минимальную высоту 100 пикселей => каждая строка должна иметь высоту 50 пикселей (100 пикселей / 2 строки).