如何修复TR的高度？

Question

是否可以在表格上固定行（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>

Answer 1

在修复高度而不包装文本时，表格是iffy（至少在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，无论窗口大小是多少，都要保持单元格/行的高度相同。< / p>

Answer 2

尝试将高度放入其中一个单元格中，如下所示：

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

但请注意，您将无法使单元格小于内容要求的单元格。在这种情况下，您必须先将文本缩小。

Answer 3

将td高度设置为小于其内容的自然高度

由于表格单元格至少要足够大以包含其内容，如果内容没有明显的高度，则可以任意调整单元格大小。

通过调整单元格大小，我们可以控制行高。

执行此操作的一种方法是在absolute单元格中设置relative位置的内容，并设置单元格的height和left和top内容。

＆＃13;

＆＃13;

table {
    width: 100%;
}
.set-height td {
    position: relative;
    overflow: hidden;
    height: 2em;
}
.set-height p {
    position: absolute;
    margin: .1em;
    left: 0;
    top: 0;
}

＆＃13;

<table><tbody>
    <tr class="set-height"><td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td></tr>
    <tr><td>Foo</td></tr>
    <tr><td>Bar</td></tr>
    <tr><td>Baz</td></tr>
    <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td></tr>
</tbody></table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

将div放入td使它对我有用。

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>

Answer 5

你的桌子宽度是90％，相对于它的容器而言。

如果你挤压页面，你也可能会挤压桌面宽度。单元格的宽度也减小，浏览器通过增加高度进行补偿。

要保持高度不变，您必须确保单元格的宽度可以容纳有意内容。修复表格宽度可能是您想要尝试的。或者也许可以玩桌子的最小宽度。

Answer 6

我必须这样做才能得到我想要的结果：

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

它拒绝仅使用单元格或div，并且需要两者。

Answer 7

这是因为单词正在包装并且正在进行新行，因此会拉伸TR。这应该可以解决您的问题：

overflow:hidden;

把它放在TR样式中 虽然它应该有用，但为什么不让它延伸o0

PS。我不测试它所以不讨厌XD