Question

我有一张像这样安排的桌子：

<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>

我希望它在填充一些内容时看起来像这样（对不起用于错误的ASCII艺术）：

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

然而它看起来像这样：

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

我确实做过身高：1％但是在IE中不起作用，所以我正在寻找一种不那么haxxy的方法。

有什么建议吗？

编辑：

这是我在PHP中使用的实际代码：

<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 1

将style="height:100%;"添加到底行（tr代码）。

<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>

Answer 2

您需要在height上设置tr。

试试这个

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;
}

示例： http://jsfiddle.net/U3JYX/

制定td合同只是它的填充和内容

2 个答案: