如何修复TR的高度？ [英] How to fix height of TR?

问题描述

是否可以修正表格上的行（tr）的高度？

Is it possible to fix the height of a row (tr) on a table?

当我缩小浏览器窗口时出现问题，一些行开始

The problem appears when I shrink the window of the browser, some rows start playing arround, and I can not fix the height of the row.

我尝试了几种方法：
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>

推荐答案

表格iffy（至少在IE中）它涉及到固定高度，而不是包装文本。我想你会发现，唯一的解决方案是把文本放在 div 元素，如下所示：

Tables are iffy (at least, in IE) when it comes to fixing heights and not wrapping text. I think you'll find that the only solution is to put the text inside a div element, like so:

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 ，无论窗口大小是多少，都保持单元格/行的高度相同。

This way, the div's height is that of the containing cell and the text cannot grow the div, keeping the cell/row the same height no matter what the window size is.

这篇关于如何修复TR的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！