如何固定TR的高度？

Question

如何固定TR的高度？

htmlhtml-tablerow

113

如何固定表格（table）中的一行（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>

- Amra

7个回答

18

尝试将高度放入其中一个单元格中，像这样：

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

需要注意的是，您无法使单元格比其所需内容更小。在这种情况下，您需要先缩小文本。

- poke

1

我非常确定在HTML属性中不使用“px”。 - unflores

12

我很确定你可以在样式属性中使用它。 - Burak Dobur

11

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

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

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

一种方法是在相对单元格内使用绝对定位设置内容，并设置单元格的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>

table-layout属性

上面片段中的第二个表格应用了table-layout: fixed，这会导致单元格在父元素内等宽分布，而不考虑它们的内容。

根据caniuse.com网站，截至2019年9月12日，使用table-layout没有明显的兼容性问题。

或者，像第三个表格一样，直接为特定单元格应用width

这些方法可以使包含通过应用position: absolute创建的大小不确定内容的单元格具有任意的宽度。

更简单的方法...

我真的应该从一开始就考虑到这一点；我们可以以通常的方式操纵块级表格单元格内容，而不会完全破坏内容的自然大小，同时也不需要使用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>

- Fred Gandt

终于有一个看起来很有希望的答案了！一到工作就得试试，如果我不忘的话，我会给出反馈的。 - jeromej

1

运行得非常好！（但要警告它会删除 text-align: center 和其他居中技巧，因为它依赖于 position: absolute） - jeromej

@ash - 我暂时想不到如何在有效破坏内容大小后保持完全自动宽度的方法，但我们可以强制表格单元格任意宽度。我已经扩展了示例片段，展示了一种可能有助于你的方法。如果有任何有用的想法，我会再仔细思考并加入更多细节 :) - Fred Gandt

@ash - 我添加了另一种方法，对于实际应用来说似乎更有用，正如我所说，我真的应该早点想到它。 - Fred Gandt

可以实现文本换行，但是行数似乎仍受字体大小的最小限制。 - Maile Cupo

显示剩余3条评论

8

将div放在td内使它对我有用。

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

- user2987600

2

你的表格宽度为90%，相对于其容器而言。

如果你缩小页面，可能会同时缩小表格宽度。单元格的宽度也会减少，浏览器通过增加高度来补偿。

为了保持高度不变，必须确保单元格的宽度可以容纳所需内容。尝试固定表格宽度可能是你想尝试的解决方案。或者也可以尝试调整表格的最小宽度。

- o.k.w

1

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

<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，需要两者同时使用。

- Jen

-6

那是因为单词换行并且在新的一行上，从而拉伸了 TR。这应该可以解决你的问题：

overflow:hidden;

把它放在TR的样式里虽然应该能用，但为什么不让它伸展一下呢o0

附注：我还没测试过，别喷我 XD

- Ozzy

3

不是因为讨厌，而是出于事实，IE浏览器支持的TD元素样式列表可以在http://msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx上找到。其中并不包括“overflow”样式。 - Andy E

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy E · Accepted Answer

在处理表格高度和文本不换行时，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的高度？

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

更简单的方法...

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