如何确定TR的高度？

  • Z时代
  • 2024-01-10
  • 分类：问答

可以固定桌子上一行的高度（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>

回答：

当涉及固定高度和不换行文本时，表格很难（至少在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，无论窗口大小如何，单元格/行都必须保持相同的高度。

以上是 如何确定TR的高度？ 的全部内容， 来源链接： utcz.com/qa/419702.html

回到顶部