Установить высоту на основе наибольшего TD в TR

Question

Установить высоту на основе наибольшего TD в TR

0

Я создаю таблицу HTML и использую Internet Explorer 11. В каждом TR есть несколько TD со встроенными элементами разного размера. Я проверил страницу через IE DOM Explorer и думаю, что знаю, что происходит. Как правило, textarea является самым большим элементом (в 167 пикселей по CSS), но иногда один из других элементов td будет больше (например, td1 = 300px). Проблема в том, что я хочу, чтобы область текста заполнялась до 300 пикселей. Я вижу, что высота наследуется от td id = "td3", которая по-прежнему равна 167px. Есть ли способ получить td id = "td3", чтобы получить высоту от самого большого sibling td в tr.

HTML выглядит примерно так:

<thead>
   ...
</thead>
<tbody>
    <tr>
        <td id="td1">[Dynamic Text1]</td>
        <td id="td2">[Dynamic Text2]</td>
        <td id="td3"><textarea class="ta"></textarea></td>
    </tr>
    <tr>
    ...
    </tr>
    <tr>
    ....
</tbody>

CSS

.ta{
    height: 100%;
    min-height: 167px
}

Одна вещь, я замечаю, что Chrome делает то, что я хочу, но я бы предпочел решение, соответствующее стандартам

wbm 19 фев. 2014, в 01:42

Источник

5

В вашем коде множество ошибок: (1) правильный тег для закрытия тд - это </td> , а не <t/td> (2) вы не закрыли тег textarea, используйте </textarea> (3) не правильно закрыл третий td . (4) Вам нужна точка с запятой после строки min-height . Исправление всех этих ошибок заставляет его работать правильно.
rvighne 19 фев. 2014, в 00:37
0

Хотя, чтобы быть педантичным, не нужно ставить точку с запятой после последнего свойства, но опуская его, вы легко можете изменить редактирование.
user13500 19 фев. 2014, в 00:50
0

в случае, если вы все еще можете помочь. Я вижу вышеупомянутую работу в Chrome, но не в Internet Explorer 11 или Firefox
wbm 19 фев. 2014, в 03:08

Показать ещё 1 комментарий

Теги:

html

css

1 ответ

Ещё вопросы

В вашем коде множество ошибок: (1) правильный тег для закрытия тд - это </td> , а не <t/td> (2) вы не закрыли тег textarea, используйте </textarea> (3) не правильно закрыл третий td . (4) Вам нужна точка с запятой после строки min-height . Исправление всех этих ошибок заставляет его работать правильно.
Хотя, чтобы быть педантичным, не нужно ставить точку с запятой после последнего свойства, но опуская его, вы легко можете изменить редактирование.
в случае, если вы все еще можете помочь. Я вижу вышеупомянутую работу в Chrome, но не в Internet Explorer 11 или Firefox

Michael Butler · Answer 1 · 2014-02-18T23-05-00.000Z

Убедитесь, что у вас нет ошибок HTML (попробуйте выполнить проверку с помощью w3.org validator). Это часто является причиной ошибок отображения, возникающих между различными механизмами рендеринга. Во всяком случае, ваш пример, кажется, отлично работает здесь:

td {
    min-height: 200px;
    background: lightblue;
    vertical-align: top;
}

textarea {
    display: block;
    height: 100%;
    min-height: 50px;
}

http://jsfiddle.net/Kg3P5/2/

Я вижу это работает на Chrome, но не Internet Explorer.
Один интересный момент. В Internet Explorer, смотря на вычисленные свойства, высота tr установлена равной 242px. В Internet Explorer высота установлена на «авто». Оба они вычисляются (не из любого CSS). Я вижу это как на jsfiddle, так и на моем проекте.
ах. Извините, у меня нет доступа к IE сейчас, но обновил пример, установив textarea для отображения: block; Пожалуйста, попробуйте еще раз, посмотрите, есть ли разница в IE. Причина заключается в том, что текстовые области изначально встроены, поэтому высота может не применяться, если вы не сделаете ее «блочным» уровнем.