Ashley Davies Ashley Davies - 1 month ago 7
CSS Question

Making a td contract to only it's padding and content

I've got a table arranged like this:

<table style="width:100%" class="ui-widget-content">
<tr>
<td rowspan="2" style="width:100px;padding:10px">
</td>
<td style="padding:5px">
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>


I want it to look like this when filled with some content (Sorry for bad ASCII art):

-----------------------
| | |
| |---------------|
| | |
| | |
| | |
-----------------------


However it looks like this:

-----------------------
| | |
| | |
| | --------------|
| | |
| | |
-----------------------


I did do height:1% in top one but it doesn't work in IE, so I'm looking for a less haxxy approach.

Any advice?

Edit:

Here's the actual code I'm using with the PHP left in:

<table style="width:100%" class="ui-widget-content">
<tr style="height:1px">
<td class="ui-widget-header" rowspan="2" style="width:100px;padding:10px">
<?= "<img src='/userPictures/$img.png' style='width:100%;height:100%'/>" ?>
</td>
<td class="ui-widget-header" style="padding:5px">
<?= $profileDetails['name']; ?>
</td>
</tr>
<tr>
<td>
<?= stripslashes($wP['Text']); ?>
</td>
</tr>
</table>

Answer

You need to set the height on the tr.

Try this

table{
    height:300px;
    border:1px solid red;
    border-collapse:collapse;
}

tr{
    height:200px;
    border:1px solid red;
    border-collapse:collapse;
}

tr.top{
    height:100px;
    border:1px solid red;
    border-collapse:collapse;
}

tr td{
    border:1px solid red;
    border-collapse:collapse;
}

Example: http://jsfiddle.net/U3JYX/

Comments