<td> 内 <div> 的 width-change 改变 <td>-width答案

【问题标题】：Width-change of <div> inside <td> changes <td>-width<td> 内 <div> 的 width-change 改变 <td>-width
【发布时间】：2014-01-19 19:21:38
【问题描述】：

我确实有一个表格，我想在悬停时显示完整的单元格内容。

我使用 css 进行了这项工作，但现在我遇到了除 Chrome 之外的所有浏览器的错误。

HTML 提取：

<table><tr>
  <td class="hover-text" style="width: 99px">
    <div style="width: 99px">A long text</div>
  </td>
</tr></table>

CSS 提取：

.hover-text div{
  text-overflow: ellipsis;
}
.hover-text:hover div{
  overflow: visible;
  z-index: 1;
  width: auto !important;
  position: absolute;
}

这一切正常，除非我使用 除 Chrome 之外的任何浏览器，只有一行并且有一个 水平滚动条。然后单元格被奇怪地调整大小。如果没有其中一个条件，我就没有问题。不幸的是，HTML 是从我使用的框架中给出的。

我尝试了各种方法，但此时我不知所措..

如果你调整表格的大小以使没有水平滚动条，你可以看到这个问题here，一切都按预期工作。

【问题讨论】：

我确定你只是在这里打错字了，但你有 <td class="hover-text" 然后 CSS 你叫 .text-hover
对不起，当然！

标签： html css width css-position html-table

【解决方案1】：

您的 td 元素有一个“悬停文本”类，而您的 CSS 使用选择器 .text-hover。这意味着您提供的 CSS 对您提供的 HTML 没有影响。

要解决此问题，请将 td 元素的类更改为“text-hover”或将 CSS 选择器更改为 .hover-text。

【讨论】：

【解决方案2】：

我已经调整了你的 CSS，现在它对我来说可以正常工作了。

Working Demo

CSS

.hover-text div{
  text-overflow: ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
}
.hover-text:hover div{
  overflow: visible;
  z-index: 1;
  width: auto !important;
  position: absolute;
}

【讨论】：

我更新了这个，问题仍然存在：jsfiddle.net/FmY5R/1（我已经修复了跳跃问题）
我不希望实际的表格跳动，它应该更像一个工具提示，但它肯定比以前更好。
你能描述一下你想要的输出吗？
就像它在例如chrome（我省略了背景颜色样式和文本跳转）。只需在右侧单元格前面显示整个文本。
Mozilla 和 chrome 在这里渲染相同的东西。你有截图吗？你用的是哪个版本？

【解决方案3】：

请注意您在 html 标记中保留的名称以及在 css 中使用的名称。即使是专业人士也可能会这样混淆。

.hover-text div{
    text-overflow: ellipsis;
}
.hover-text:hover div{
    overflow: visible;
    z-index: 1;
    width: auto !important;
    position: absolute;
}

【讨论】：

当然可以（抱歉打错字），但在我描述的情况下，有一个错误:(

【解决方案4】：

找到解决方案：http://jsfiddle.net/FmY5R/10/

td{
   display: inline-block
}

但我仍然不确定是什么导致了这个错误..

【讨论】：