Html 如何固定TR的高度？

How to fix height of TR?

提问by Amra

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

是否可以固定表格上的行（tr）的高度？

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

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

I tried several ways: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

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

I am using IE7

我正在使用 IE7

Style

风格

.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 code.

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>

采纳答案by Andy E

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 divelement, like so:

当涉及到固定高度而不是环绕文本时，表格是不确定的（至少在 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>

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.

这样， thediv的高度是包含单元格的高度，文本不能增长div，无论窗口大小如何，都保持单元格/行的高度相同。

回答by poke

Try putting the height into one of the cells, like this:

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

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

Note however, that you won't be able to make the cell smaller than the content requires it to be. In that case you would have to make the text smaller first.

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

回答by Fred Gandt

Setting the tdheight to less than the naturalheight of its content

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

Since table cells want to be at least big enough to encase their content, if the content has no apparent height, the cells can be arbitrarily resized.

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

By resizing the cells, we can control the row height.

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

One way to do this, is to set the content with an absoluteposition within the relativecell, and set the heightof the cell, and the leftand topof the content.

一种方法是absolute在relative单元格内设置具有位置的内容，并设置height单元格的left和top，以及内容的和。

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}

<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>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <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>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><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>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <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>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><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>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <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>

The table-layoutproperty

该table-layout物业

The second table in the snippet above has table-layout: fixedapplied, which causes cells to be given equal width, regardless of their content, within the parent.

table-layout: fixed应用了上面代码片段中的第二个表，这会导致单元格在父级中被赋予相等的宽度，而不管它们的内容如何。

According to caniuse.com, there are no significant compatibility issues regarding the use of table-layoutas of Sept 12, 2019.

根据caniuse.com 的说法，table-layout截至 2019 年 9 月 12 日，没有关于使用的重大兼容性问题。

Or simply apply widthto specific cellsas in the third table.

或者简单地适用width于第三个表中的特定单元格。

These methods allow the cell containing the effectively sizeless content created by applying position: absoluteto be given some arbitrary girth.

这些方法允许包含通过应用创建的有效无尺寸内容的单元格position: absolute被赋予一些任意的周长。

Much more simply...

更简单...

I really should have thought of this from the start; we can manipulate block leveltable cell content in all the usual ways, and without completely destroying the content's natural size with position: absolute, we can leave the table to figure out what the width should be.

我真的应该从一开始就想到这一点；我们可以用所有通常的方式操作块级表格单元格内容，并且不用完全破坏内容的自然大小position: absolute，我们可以离开表格来确定宽度应该是多少。

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}

<table><tbody>
  <tr class="cap-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>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <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>
</tbody></table>

回答by user2987600

Putting div inside a td made it work for me.

将 div 放在 td 中使其对我有用。

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

回答by o.k.w

Your table width is 90% which is relative to it's container.

您的表格宽度是相对于它的容器的 90%。

If you squeeze the page, you are probably squeezing the table width as well. The width of the cells reduce too and the browser compensate by increasing the height.

如果您挤压页面，您可能也会挤压表格宽度。单元格的宽度也会减少，浏览器会通过增加高度来补偿。

To have the height untouched, you have to make sure the widths of the cells can hold the intented content. Fixing the table width is probably something you want to try. Or perhaps play around with the min-width of the table.

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

回答by Jen

I had to do this to get the result that I wanted:

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

<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>

It refused to work with only the cell or the div and needed both.

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

回答by Ozzy

That is because the words are wrapping and are going on new lines hence stretching the TR. This should fix your problem:

那是因为单词正在换行并换行，因此拉伸了 TR。这应该可以解决您的问题：

overflow:hidden;

Put that in the TR styles Although it should work, why not just let it stretch o0

把它放在 TR 样式中 虽然它应该可以工作，但为什么不让它拉伸 o0

PS. i aint tested it so dont hate XD

附注。我没有测试过所以不要讨厌 XD