Таблицы не объединяются со мной.
Это упрощенная версия таблицы, с которой я работаю: 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>
Как вы можете видеть, размах строк убивает мой сон фиксированной высоты.Я пробовал оборачивать div внутри (динамически), но безуспешно.
Мне нужны TD, чтобы они оставались на одной высоте, все, кроме одного с размахом строк (он должен расширяться по мере необходимости) -чтобы ТД не растягивались.