Making a td contract to only it's padding and content_问答_开发者

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

开发者 https://www.devze.com 2023-04-11 01:56 出处：网络

I\'ve got a table arranged like this: <table style=\"width:100%\" class=\"ui-widget-content\"> <tr>

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 lik开发者_如何学Pythone 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>

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/

Add style="height:100%;" to the bottom row (tr tag).

<html>
<head>
<style>
    html {
        height: 100%;
    }
    body {
        height: 100%;
    }
    table tr td {
        border: 1px solid black;
    }
    table {
        height: 400px;
    }
</style>
</head>
<body>
    <table style="width:100%" class="ui-widget-content">
        <tr>
            <td rowspan="2" style="width:100px; padding:10px">&nbsp;</td>
            <td style="padding:5px;">Some text</td>
        </tr>
        <tr style="height:100%;">
            <td>&nbsp;</td>
        </tr>
    </table>
</body>
</html>