Создание td-контракта только для его заполнения и содержимого

#html #css #layout #html-table

#HTML #css #макет #html-таблица

Вопрос:

У меня есть таблица, расположенная следующим образом:

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

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

Однако это выглядит так:

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

Я сделал height: 1% в верхнем, но это не работает в IE, поэтому я ищу менее сложный подход.

Любой совет?

Редактировать:

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

Ответ №1:

Вам нужно установить 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. К сожалению, та же проблема, что и в другом ответе. Я добавил изображение в левую ячейку, а верхняя правая ячейка просто растянулась случайным образом. Я нажал «Выполнить», но я никогда не использовал jsFiddle, поэтому я не знаю, сохраняет ли он для всех или только для меня.

2. Чтобы сохранить с помощью jsfiddle, нажмите Обновить. URL-адрес будет обновлен, и вы можете поделиться им с нами. Что касается проблем с изображением, попробуйте изменить height в CSS.

Ответ №2:

Добавить 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">amp;nbsp;</td>
            <td style="padding:5px;">Some text</td>
        </tr>
        <tr style="height:100%;">
            <td>amp;nbsp;</td>
        </tr>
    </table>
</body>
</html>

1. К сожалению, это не решило проблему. Идентичные результаты. Тем не менее, спасибо за ответ.

2. Вам нужно установить ширину html, тела и самой таблицы. Это определенно дает результат, который вы ищете. Я обновил ответ, чтобы дать вам полный код. Я определенно протестировал его.

3. Он находится в div с заданной шириной (Редактировать: я использую Firefox и IE9, он также не отображался. Вы используете Google Chrome?)

4. Подождите, он работает так, как и предполагалось, когда я извлекаю изображение из левого контейнера. Когда я помещаю изображение в левый контейнер, оно растягивает верхний? Я думаю, что это как-то испортило бы rowspan? (Редактировать: Да, я только что сделал буквальное копирование / вставку вашего кода, добавил изображение, и оно растянуло верхнюю ячейку.)