如何固定TR的高度？

Posted 2023-02-16

技术标签:

【中文标题】如何固定TR的高度？【英文标题】：How to fix height of TR? 【发布时间】：2011-01-06 18:05:57 【问题描述】：

是否可以固定表格上的行高（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  class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td  class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td  class="tableContainerRow2">&#160;</td>
        <td  >:</td>
        <td  class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>

【问题讨论】：

【参考方案1】：

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

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

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

一种方法是在relative 单元格内设置absolute 位置的内容，并设置单元格的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 属性

上面 sn-p 中的第二个表格应用了table-layout: fixed，这会导致在父单元中，无论其内容如何，单元格的宽度都相同。

根据caniuse.com，截至 2019 年 9 月 12 日，table-layout 的使用不存在重大兼容性问题。

或者简单地将width 应用到特定单元格，如第三个表中所示。

这些方法允许为包含通过应用position: absolute 创建的有效无大小内容的单元格指定任意周长。

更简单...

我真的应该从一开始就考虑到这一点；我们可以用所有常用方式操作block level 表格单元格内容，并且在不完全破坏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>

【讨论】：

终于找到了一个看起来很有希望的答案！下班了一定要试试，不忘记我会反馈的。工作就像一个魅力！（警告它确实删除了text-align: center 和其他居中技巧……因为它依赖于position: absolute）这适用于我的情况下的高度，但是当使用postion: absolute 时，我失去了自动单元格宽度。试图找到一种方法让表格在控制行高的同时仍然正确计算单元格宽度。有什么想法吗？ @ash - 在有效地破坏内容的大小后，我并没有立即想到任何保持全自动宽度的方法，但我们可以强制表格单元格任意宽。我已经扩展了示例 sn-p 以显示一种可能对您有所帮助的方法。如果想到任何有用的东西，我会再考虑一下，并添加更多细节:) 谢谢弗雷德。请注意，我可以使用标题 () 为列提供固定大小，但我担心标题可能太窄或太宽。 【参考方案2】：

在固定高度而不是环绕文本方面，表格是不确定的（至少在 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，无论窗口大小如何，都保持单元格/行相同的高度。

【讨论】：

感谢您的建议，它似乎有效，但看起来有点乱。乐于助人 :-) 不幸的是，乱码通常出现在 hacks 和变通方法中。我使用 [code].container width: 100%;最大高度：40px；溢出：隐藏； [/code] 和 [code][/code]. 我做了同样的方法，将一个 div 放在标签内，效果很好。我只在 Chrome 上遇到过这个问题。 FFox、Safari 和 IE 都很好地支持了表头设置的高度。感谢分享！ :) 在 safari 中不起作用...您还需要在 div 上设置实际高度和宽度，而不仅仅是 td 【参考方案3】：

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

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

【讨论】：

【参考方案4】：

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

<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 并且需要两者。

【讨论】：

【参考方案5】：

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

overflow:hidden;

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

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

【讨论】：

不讨厌，但是在msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx 有一个 IE 中的 TD 元素支持的样式列表。 overflow 不是其中之一。【参考方案6】：

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

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

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

【讨论】：

【参考方案7】：

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

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

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

【讨论】：

我很确定你没有在 html 属性中使用“px”。我很确定你可以在 style 属性中使用。

以上是关于如何固定TR的高度？的主要内容，如果未能解决你的问题，请参考以下文章

请教如何改变tableHeaderView的高度

如何让一个表格高度自适应另一个表格高度。两个表格高度都不固定

如何固定table的表头

css写一个表头如何固定

hbuildertd的宽度

如何使DIV的高度固定，当超出固定高度时，让文字自动上下循环滚动

如何固定TR的高度？

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

更简单...

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