如何确定TR的高度？

小编典典

如何确定TR的高度？

html

可以固定桌子上一行的高度（tr）吗？

当我缩小浏览器窗口时，会出现问题，一些行开始播放，而我无法确定行的高度。

我尝试了几种方法： tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

我正在使用IE7

样式

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
}

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

HTML代码。

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>

阅读 614

2020-05-10

共1个答案

小编典典

当涉及固定高度和不换行文本时，表格很难（至少在IE中如此）。我认为您会发现唯一的解决方案是将文本放入div元素中，如下所示：

td.container > div {

    width: 100%;

    height: 100%;

    overflow:hidden;

}

td.container {

    height: 20px;

}


<table>

    <tr>

        <td class="container">

            <div>This is a long line of text designed not to wrap

                 when the container becomes too small.</div>

        </td>

    </tr>

</table>

这样，div的高度就是包含单元格的高度，并且文本无法增长div，无论窗口大小如何，单元格/行都必须保持相同的高度。

2020-05-10