Question

我有一张这样的表：

table

而我想要的是，强制<tr>高度固定，只有在我徘徊时才改变，我不会在图片上看到<tr>像红色方块。

有人可以帮忙吗？

Answer 1

您可以在悬停时设置tr高度，如下所示：

table{
  table-layout: fixed;/* by default auto: by using fixed, it forces the layout as your height and width */
}
tr:hover{
  height: 200px; /* apply needed height*/
}

Answer 2

如果要让<tr> height与1行匹配，则需要设置<table>和<td> s或<th>的宽度并使用table-layout:fixed;修复这些内容。

下一步是设置 tr：white-space:nowrap; + overflow:hidden;（最终text-overflow:ellipsis;。

然后 tr:hover重置white-space正常，单元格将会显示以匹配内容height。

给我们一个小提琴，（我将）将这些规则添加到其中。

Answer 3

为你的td / tr应用文本溢出。在这里我添加display：block。因为有时没有这段代码就行不通。

<强> Working Demo Here

CSS代码：

.youClass{
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     width:100px;
  }

 .youClass:hover{
       white-space:normal;
       width:100px;
       word-wrap: normal;
       word-break:break-all;
  }

<强>解释

   yourText ='yourTextMore';
  `text-overflow:ellipsis` => `yourText...` => output(automatically add '...' at the end of the text)  
  `text-overflow:clip`     => `yourTextMor` => output('e' hide automatically)

Answer 4

诀窍是将高度限制在内部P元素上，并在TR悬停上设置动画（或）切换

<强> DEMO

CSS：

.hoverRow td{
  background:#eee;
  vertical-align:top;
  border-bottom:1px solid #444;
}
.hoverRow p{   
  vertical-align:top;
  position:relative;
  overflow:hidden;
  max-height:1.3em;
  transition: max-height 0.4s;
}
.hoverRow tr:hover p{
  max-height:100px; /* don't exagerate :) */
}

HTML

  <table class="hoverRow">
    <tr>
      <td><p>Single line</p></td>
      <td><p>data</p></td>
    </tr>
    <tr>
      <td><p>Single line</p></td>
      <td><p>data</p></td>
    </tr>
    <tr>
      <td>
        <p>
          Multiple line<br>
          Multiple line<br>
          Multiple line
        </p>
      </td>
      <td><p>data</p></td>
    </tr>
    <tr>
      <td><p>Single line</p></td>
      <td><p>data</p></td>
    </tr>
  </table>

只在tr表上显示一行

4 个答案: