102

可以固定桌子上一行的高度（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>

html html-table row

— 阿姆拉
source

97

当涉及固定高度和不换行文本时，表格很不稳定（至少在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，无论窗口大小如何，单元格/行都必须保持相同的高度。

— 安迪
source

1

感谢您的建议，它似乎可以工作，但是看起来有点混乱。

— Amra 2010年

很乐意提供帮助：-)不幸的是，在黑客和变通办法中通常会出现混乱的代码。

— Andy E 2010年

我使用[code] .container {width：100％; max-height：40像素；溢出：隐藏 } [/ code]和[code] <div class ='container'> </ div> [/ code]。

— Cees Timmerman

我做过同样的方法，将div放在<th>标记内，效果很好。我仅在Chrome上遇到过此问题。FFox，Safari和IE很好地支持了表格标题上设置的高度。感谢分享！:)

— 马里奥·罗德里格斯

不适用于野生动物园...您还需要在div上设置实际的高度和宽度，不仅是td

— Radu Simionescu 2015年

15

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

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

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

— 戳
source

1

我很确定您不会在html属性中使用“ px”。

— 弗洛雷斯

10

我很确定您可以在style属性中使用。

— Burak Dobur

11

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

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

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

一种方法是，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>

展开摘要

该table-layout物业

上面代码段中的第二张表格已table-layout: fixed应用，这将导致在父级中为单元赋予相等的宽度，而不管其内容如何。

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

或简单地将其应用于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>

展开摘要

— 弗雷德·甘特
source

最后一个看起来很有希望的答案！上班后立即尝试，如果我不会忘记的话，我会提供反馈。

— jeromej 2015年

1

像魅力一样工作！（警告它确实删除了text-align: center其他居中技巧，但是……依赖它position: absolute）

— jeromej 2015年

在我的情况下，这适用于高度，但是当使用时postion: absolute，我失去了自动像元宽度。在控制行高的同时，试图找到一种方法使表格仍然正确地计算单元格宽度。有什么想法吗？

— 灰

@ash-在有效破坏内容的大小之后，我没有立即想到任何方法来保持全自动宽度，但是我们可以强制将表格单元格设置为任意宽度。我已经扩展了示例片段，以显示一种可以帮助您的方法。如果有任何有用的想法，我会

— 再三

谢谢弗雷德。请注意，我可以使用标头（<th>）为列提供固定大小，但随后我担心标头可能太窄或太宽。

— 灰

8

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

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

— 用户名
source

2

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

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

要保持高度不变，必须确保单元格的宽度可以容纳想要的内容。固定表格宽度可能是您想尝试的事情。或尝试使用表格的最小宽度。

— 好吧
source

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一起使用，并且两者都需要。

— 仁
source

-5

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

overflow:hidden;

将其放在TR样式中尽管它应该起作用，但为什么不让它拉伸o0

PS。我没有测试过，所以不要讨厌XD

— 奥兹
source

3

不讨厌，但msdn.microsoft.com/zh-cn/library/ms535911(VS.85).aspx中提供了IE中TD元素支持的样式列表。overflow不是其中之一。

— Andy E 2010年

如何确定TR的高度？

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

更简单地...

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