Блог

Главная - Вопросы по программированию - Управление высотой строки таблицы на основе , которая получает свою высоту из текста

Управление высотой строки таблицы на основе , которая получает свою высоту из текста

#javascript #jquery #html #css #internet-explorer-8

#javascript #jquery #HTML #css #internet-explorer-8

Вопрос:

У меня есть таблица, которая содержит несколько строк с 2 столбцами. Один столбец содержит изображения, а другой содержит текст. Изображения — это большие изображения, размер которых я изменяю (то есть они берут свою высоту из контейнера). Мне нужно, чтобы строка брала свою высоту из текстовой ячейки. Поскольку количество текста в строке является переменным, я не могу назначить явную высоту. Но, учитывая, что изображения больше, чем размер текста, строка берет свою высоту из ImageCell, а не из TextCell . Как мне заставить строку и ячейку ImageCell принимать высоту текстовой ячейки?

 <table  border="0" cellspacing="0" cellpadding="0" id="articleTable">
    <tr id="row-1" class="articleRow light" >
        <td class="imageCell" id="image-cell-1">
            <img src="images/Support/CFD.png" alt="" class=""/>
            <img src="images/Support/CFD3.png" alt=""  class="" />
        </td>
        <td class="textCell" id="text-cell-1" >
            <div class="articleTextWrapper">
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            </div>
        </td>

    </tr>
    <tr id="row-2" class="articleRow dark" style="">
        <td class="textCell" id="text-cell-2" >
            <div class="articleTextWrapper">
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            </div>
        </td>
        <td class="imageCell"  id="image-cell-2">
            <img src="images/Support/TM2.png" alt=""   class="" />
            <img src="images/Support/TM1.png" alt=""   class=""/>
        </td>
    </tr>

Ответ №1:

Может быть, какой-нибудь метод Javascript, подобный этому:

 var txts = document.getElementsByClassName("textCell");
for(var i=0; i<txts.length; i  ) {
    var h = txts[i].getElementsByClassName("articleTextWrapper")[0].offsetHeight;
    txts[i].parentNode.style.height = h   "px";
}

Это установило бы фиксированную высоту <tr> относительно высоты текста внутри ячейки, что дало бы вам возможность установить изображение на полную высоту.

Метки: