Question

我有以下HTML表：

table th {
  border: 1px solid black;
  z-index: 1;
}

.a {
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  background: white;
}

.b {
  white-space: nowrap;
}

.a:hover {
  overflow: visible;
  z-index: 2;
}

.c {
  background: green;
}

<table>
  <tr>
    <th class=a><span class=c>a very long text that overflows</span></th>
    <th class=b>some other text that is very long and should only be partly obscured</th>
  </tr>
</table>

我要完成的工作是在悬停时可以看到字段a中的文本（“很长的文本会溢出”）。表结构不应更改。确实确实可以看到，但是应该在它后面的文本（来自字段b）将其部分遮盖。添加的跨度和z索引也无效。（在Firefox和Chrome中测试）

我想要的是字段a中的文本变得可见，并根据需要遮盖尽可能多的字段b。

在JSFiddle中也可用：https://jsfiddle.net/tdn15kh8/7/

Answer 1

将position: relative;添加到包含溢出文本的th：

table th {
  border: 1px solid black;
  z-index: 1;
}

.a {
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  background: white;
  position: relative;
}

.b {
  white-space: nowrap;
}

.a:hover {
  overflow: visible;
  z-index: 2;
}

.c {
  background: lightgreen;
  padding-right: .5rem;
}

<table>
  <tr>
    <th class=a><span class=c>a very long text that overflows</span></th>
    <th class=b>some other text that is very long and should only be partly obscured</th>
  </tr>
</table>

选中this MDN article以了解堆栈上下文。

Answer 2

要使z-index工作，还需要position。

.a:hover {
   overflow: visible;
   position: relative;
   z-index: 2;
}

Fiddle example here

Answer 3

将position: relative添加到.a。 Z索引的位置必须是相对还是绝对。

Answer 4

还有数据属性解决方案，可让您将数据属性中的文本传递给:: after伪类。看起来像这样：

table{width: 300px;}
table th{border: 1px solid black;z-index: 1;}
.a{max-width: 100px;overflow: hidden;white-space: nowrap;background: white;}
.b{white-space: nowrap;}
.c{position: relative;}
.a:hover{overflow: visible;}
.a:hover .c::after{content:attr(data-text); display: block;position: absolute; top: 0; left: 0; background: green;}

<table>
<tr>
  <th class="a">
    <span class="c" data-text="a very long text that overflows">a very long text that overflows</span>
  </th>
  <th class="b">some other text</th>
</tr>
</table>

更改溢出：隐藏在表中以在悬停时可见

4 个答案: