可以在桌子上固定行(TR)的高度吗?

当我缩小浏览器的窗口时,问题出现了,一些行开始播放,并且我无法确定行的高度.

我try 了几种方法:

我正在使用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,从而使单元格/行的高度保持不变,而不管窗口大小如何.

Html相关问答推荐

Blazor中有1像素高行的表格

R中的动态Webscraping

容器内的SVG图像没有响应

在FlexBox中将div拉伸到父div的完全高度

如何在元素的三条边中间换行边框?

悬停效果在新西兰表上不起作用

这<;td&>如何溢出<;表>;?

轨道上的居中范围滑块拇指(Webkit)

如何生成随机字符串的字母数字字符集长度到html跨度?

使用bash从html表格中提取表格

:invalid Select 器的惰性判断

为什么 html 元素的 max-width 和 width 一起工作?

将组件移动到页面底部 Angular

导航丸被选中(活动),但内容未显示.怎么会?

有没有办法使用 CSS border-radius 创建 HTML 视频标签的三角形显示?

在一行中对齐两个不同形式的按钮

如何将第一个 p 标签放在其下方第二个 p 标签的中间

我怎么能有 :not(.class):nth-of-type(even)?

Bootstrap 5 网格问题,div 向下转义

水平滚动框不显示所有元素