Hi,
I have a table that is being generated by a database, there are several fields that have longer type content while most fields are very happy living within the natural size of the td elements (with respective padding, font-size…).
Using php I drop classes onto the table cells that need their width over-ridden.
Her is a bit of the table:
<tr>
<td>2</td>
<td>2011-07-02</td>
<td>2011-07-02</td>
<td>2011-07-02</td>
<td class="location_cell">Some longish location from the database</td>
</tr>
And the css to deal with the width over-riding:
td.location_cell
,td.program_cell
,td.address_cell{
width: 200px;
display: block;
}
When using this css the table cell’s width does set; however it loses the height of the the surrounding cells. With borders surrounding the table’s cells it looks bad.
I have tried numerous things to have the height go to 100% of its’ containing element with no luck. Things I have tried:
- used display: inline-block instead of display: block;
- set the height to 100%;
- wrapped div inside and outside the cell - very bad, ugly, hacky and improper, but it did not help anyway.
- set has-layout.
- other things to embarrassing to mention
I can not specify a fixed height as the other column table cells sometimes have content that wraps 2 or more lines; by setting an explicit size it would not grow with the surrounding cells, leaving the same problem.
Is this possible or am I stuck.
Regards,
Steve