Заключение тд контракта только с отступами и контентом - PullRequest
Новая
       20

Заключение тд контракта только с отступами и контентом

3 голосов
/ 07 октября 2011

У меня стол устроен так: 

<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, поэтому я ищу менее грубый подход.

Любой совет?

Edit:

Вот фактический код, который я использую с оставленным 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>

Ответы [ 2 ]

1 голос
/ 07 октября 2011

Вам необходимо установить 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/

1 голос
/ 07 октября 2011

Добавьте 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>
...