控制表格行高度,根据该高度<td>从文本获取其高度



我有一个包含一些行和2列的表。一列包含图像,另一列包含文本。图像是大图像,我调整大小(意思是,它们从容器中获取高度)。我需要从textCell中获取行高度。由于一行中的文本量是可变的,我不能指定显式的高度。但是考虑到图像比文本的大小大,行从imageCell而不是textCell中获取高度。我如何得到行和imageCell采取textCell的高度?

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

可能是像这样的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>设置一个相对于单元格内文本高度的固定高度,从而使您能够将图像设置为全高度。

最新更新